您可以在require（）中动态加载scss文件吗？

Question

我有一个函数，可以根据条件确定要返回的scss文件路径。这部分工作正常。它将导出文件。当我在app.js中加载文件时，我正在使用require（）语句。当我在开发工具中检查需求时，require返回该函数。我需要它引用路径，以便它将加载scss。

我尝试用vanilla.js调用相同的函数，并在标头中附加一个新元素。我确认href路径正确。

app.js

require('./global.js');
require('./validate.js');
// require('../styles/styles.scss'); original scss that loads fine
require('./testCSS.js');

var config = require('./config/config.js');
var styles = "";

var testCss = {
    testCSS: testCSS,
};


function testCSS() {
    var x = GetRandomInt(1, 50);
    console.log(x, config.fullFormCSSTest);

    if(x < config.fullFormCSSTest){
       styles = '../styles/stylesV2.scss';
        console.log('new');
    }else {
        styles = '../styles/styles.scss';
     console.log('old');
    }
    return styles;
}

function GetRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

module.exports = {testCss:testCSS}; //I have tried 

webpack

var prodconfig = {
    entry: allEntries,
    output: {
        path: path.join(__dirname, "../dist/"),
        filename: "static/js/[name].[hash].js"
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: { minimize: true }
                        },
                        { loader: "sass-loader" }
                    ]
                })
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "jshint-loader"
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            name: "static/img/[hash]-[name].[ext]"
                        }
                    },
                    {
                        test: /\.html$/,
                        use: [{ loader: "html-loader",
                        options: {minimize: true}
                      }]
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: [".js"],
        alias: {
            vue$: "vue/dist/vue.min.js"
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            title: "Compare Insurance Quotes",
            template: "./index.html",
            chunks: ["vendor", "shared", "app"],
            chunksSortMode: orderByList(["shared", "vendor", "app"]),
            filename: "./index.html",
            minify: htmlMinify
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, "../static"),
                to: path.resolve(__dirname, "../dist/static"),
                ignore: [".*"]
            },
            {
                from: path.resolve(__dirname, "../creative/creative"),
                to: path.resolve(__dirname, "../dist/creative"),
                ignore: [".*"]
            }
        ]),
        new ExtractTextPlugin({
            filename: "css/[name].css",
            disable: false,
            allChunks: true
        })
    ]
};

预期的输出-> require（'../ styles / styles.scss'）或require（'../ styles / stylesV2.sccs'）取决于加载条件并根据路径应用样式。 testCss.js