Блог

Главная - Вопросы по программированию - Как создать несколько выходных каталогов из двух или более файлов main.scss с помощью webpack

Как создать несколько выходных каталогов из двух или более файлов main.scss с помощью webpack

#reactjs #vue.js #webpack #web-frontend

Вопрос:

В этом проекте css и js одинаковы. Разница в css, это цвета, используемые для каждого проекта. Я жду предложений о том, как это сделать. Спасибо

выведите структуру с нужным веб — пакетом.

 dist /
    - publicA
        - css
        - js
    - publicB
        - css
        - js

Рабочая зона с vue или react

 src /
    components
    ...
    ...
    main.js

мой контент main.js

     import "../resources/sources/*.scss"

    import Vue from 'vue'
    import App from './App.vue'
    ..

Каталог, в котором можно найти глобальные стили

 resources/scss /
    - publicA /
        - scss /
            _custom.scss
            _common.scss
            // included custom y common
            main.scss
    - publicA /
        - scss 
            _custom.scss
            _common.scss
            // included custom y common
            main.scss

Содержимое моего веб-пакета конфигурации

 const config = {
    mode: "development",
    devtool: 'source-map',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname   `dist/js/[name].min.js` ),
        //publicPath: path.resolve(__dirname),
        filename: `js/[name].min.js`
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            },
            {
                use: "asset",
                test: /.(png|svg|jpg|jpeg|gif)$/i,
            },
            { 
                test: /.js$/, 
                exclude: /node_modules/,
                use:[
                    {
                        loader: 'babel-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                ]
            },
            {
                test: /.(css|scss|sass)$/,
                use: [
                        'style-loader',
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                            }
                        }                   
                ]
            },
        ]
    },
    resolve: {
        alias: {
            'vue

Ответ №1:

вы можете увидеть загрузчик файлов, https://www.npmjs.com/package/file-loader у него есть дополнительная функция с именем name()

введите описание изображения здесь

Комментарии:

1. НЕ размещайте изображения кода, данных, сообщений об ошибках и т.д. - Скопируйте или введите текст в вопрос. Пожалуйста, зарезервируйте использование изображений для диаграмм или демонстрации ошибок рендеринга, вещей, которые невозможно точно описать с помощью текста.

: 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: `css/[name].min.css`
})
]
};

``

Ответ №1:

вы можете увидеть загрузчик файлов, https://www.npmjs.com/package/file-loader у него есть дополнительная функция с именем name()

введите описание изображения здесь

Комментарии:

1. НЕ размещайте изображения кода, данных, сообщений об ошибках и т.д. — Скопируйте или введите текст в вопрос. Пожалуйста, зарезервируйте использование изображений для диаграмм или демонстрации ошибок рендеринга, вещей, которые невозможно точно описать с помощью текста.

Метки: