Не могу получить общий scss при использовании sass-loader - PullRequest
Новая
       36

Не могу получить общий scss при использовании sass-loader

0 голосов
/ 09 ноября 2018

Это мой конфиг веб-пакета: 

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 import 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?

...