Можете ли вы динамически загрузить файл scss в require ()? - PullRequest
0 голосов
/ 21 июня 2019

У меня есть функция, которая определяет, какой путь к файлу scss будет возвращаться на основе условия.Эта часть работает правильно.Это будет экспортировать файл.Когда я загружаю файл в app.js, я использую оператор require ().Требование возвращает функцию, когда я проверяю ее в Dev Tools.Мне нужно, чтобы он ссылался на путь, чтобы он загружал 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...