webpack Import 动态文件

其实React Import scss 是非常简单的，比如一般写法import './PromotionPage.scss';，今天遇到一个样式需要覆盖，那么修改后的代码变成了：

import './PromotionPage.scss';

import { config } from "../../../common/config";
if (config.spec == "venetian") {
    import '../../../requirement/venetian/stuff/PromotionPage.scss';
}

很明显程序报错了：'import' and 'export' may only appear at the top level
最后修改为

import { config } from "../../../common/config";

if (config.spec == "venetian") {

    import ('../../../requirement/venetian/stuff/PromotionPage.scss');

}

但是在webpack 打包的时候，会把requirement/xxx/stuff/PromotionPage.scss路径下的文件一起打包，会比较麻烦，所以需要在打包前去替换文件中变量，这里的变量也就是一个占位符，

在根目录新建一个prebuild.js文件

var glob = require("glob")

var fs = require("fs");

function readFile(path) {

    return fs.readFileSync(path).toString();

}

function writeFile(path, content) {

    fs.writeFileSync(path, content, {encoding:"utf8",flag:"w"});

}

function readConfig() {

    var configContent = readFile("src/common/config.js");

    var i = configContent.indexOf("{");

    configContent = configContent.substring(i);

    return JSON.parse(configContent);

}

var config = readConfig();

const startTag = "//__start";

const endTag = "//__end";

function replaceVariables(content) {

    var tag = false;

    var ret = "";

    var off = ;

    while (true) {

        var i = content.indexOf(startTag, off);

        if (i < ) {

            if (tag) {

                ret += content.substring(off);

                return ret;

            } else {

                return false;

            }

        } else {

            tag = true;

        }

        var j = content.indexOf("\n", i + startTag.length)

        var tem = content.substring(i + startTag.length, j).trim();

        tem = tem.replace("#{spec}", config.spec);

        var k = content.indexOf(endTag, j);

        ret += content.substring(off, j) + "\n";

        ret += tem + "\n";

        off = k;

    }

}

glob("src/**/*.js", {}, function (er, files) {

    for (var i = ; i < files.length; i++) {

        var file = files[i];

        var content = readFile(file);

        content = replaceVariables(content);

        if (content) {

            console.log("prebuild中文的" + file);

            // console.log(content);

            writeFile(file, content);

        }

    }

});

再修改package.json

  "scripts": {

    "prebuild": "node prebuild.js",

    "start": "node prebuild.js && webpack-dev-server -d --progress --colors",

    "build": " node prebuild.js && webpack --progress --color --verbose --config ./webpack.prd.config.js"

  },

使用例子：

//__start import "./themes/#{spec}/skin.scss";

import "./themes/xxx/skin.scss";

//__end