reactjs - 如何使用 webpack 从两个或多个 main.scss 文件生成多个输出目录

问题描述

在这个项目中，css和js是一样的。区别在于css，它是用于每个项目的颜色。我等待有关如何执行此操作的建议。谢谢

使用所需的 web 包输出结构。

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

内容我的配置 webpack

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$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: `css/[name].min.css`
        })
    ]
};

``

标签： reactjsvue.jswebpackweb-frontend

reactjs - 如何使用 webpack 从两个或多个 main.scss 文件生成多个输出目录

问题描述

解决方案

推荐阅读