使用sass-loader时无法获得通用的scss

时间:2018-11-09 04:17:54

标签: webpack-4 sass-loader

这是我的Webpack配置:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
//entries
entry: {
        index: './src/js/index.js',
        about: './src/js/about.js'
    },
//outputs
output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js', 
        chunkFilename: 'js/[name].js',
        publicPath: './'
    },
//loaders
module: {
        rules: [{
                test: /\.scss$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        }
                    },
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
 //plugins
 plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: "css/[name].css"
        })
    ],
//common files
    optimization: {
        splitChunks: {
            cacheGroups: {
            //common js and css
                common: {
                    name: 'common',
                    chunks: 'all',
                    minChunks: 2,
                    minSize: 0
                }
            }
        }
    }
}

index.js导入index.scss

@import 'scss-common.scss';
@import 'demo.css';

.box-1 {
    width: 100px;
    height: 200px;
    background: #F55;
}

about.js导入about.scss

@import 'scss-common.scss';
@import 'demo.css';

.box-2 {
    width: 200px;
    height: 100px;
    background: #1ABC9C;
}



然后,在运行webpack之后,我得到了三个CSS文件:

index.css

/* This is scss-common.scss content */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.box-1 {
  width: 100px;
  height: 200px;
  background: #F55; }

about.css

/* This is scss-common.scss content */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.box-2 {
  width: 200px;
  height: 100px;
  background: #1ABC9C; }
common.css

/* Only include demo.css */
.demo {
    display: block;
}


  

现在我们可以看到common.css仅包含demo.css,   不包括scss-common.scss,我认为这是一个问题    sass-loader,但是如何解决?如何将scss-common.scss放入common.css文件中?


0 个答案:

没有答案