style-resources-loader

style样式资源处理器，在style资源中注入内容，导入css / sass / scss / less / stylus这些内容

主要作用

导入一些公共的样式文件，比如：variables / mixins / functions，避免在每个样式文件中手动的@import导入

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

默认在样式文件之前导入，如果在样式文件之后导入，需要这样

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'
                }
            }]
        }]
    },
    // ...
}

options选项的参数

patterns：字符串或数组，表示导入资源的路径，绝对路径

injector：‘prepend’ 或者 ‘append’， 表示资源导入的位置，在之前还是之后，样式后导入的会覆盖前面导入的

resolveUrl： 是否允许@import形式导入，默认true