webpack配置预sass/less文件

npm i style-resources-loader -D

使用默认资源注入器将variables和添加mixins到所有scss文件。

默认目录

./src  <-- webpack context
  /styles
    /variables
      |-- fonts.less
      |-- colors.less
    /mixins
      |-- size.less
    |-- reset.less

webpack.config.js

module.exports = {
    // ...
    module: {
        rules: [{
            test: /.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [
                        './path/from/context/to/scss/variables/*.scss',
                        './path/from/context/to/scss/mixins/*.scss',
                    ]
                }
            }]
        }]
    },
    // ...
}

附加variables到所有less文件并覆盖原始less variables.

webpack.config.js

module.exports = {
    // ...
    module: {
        rules: [{
            test: /.less$/,
            use: ['style-loader', 'css-loader', 'less-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: path.resolve(__dirname, 'path/to/less/variables/*.less'),
                    injector: 'append'
                }
            }]
        }]
    },
    // ...
}

关于vue-cli的导入