style-resources-loader 的作用

導(dǎo)入css 預(yù)處理器的一些公共的樣式文件變量，比如：variables , mixins , functions，避免在每個樣式文件中手動的@import導(dǎo)入，然后在各個css 文件中直接使用 變量。

使用方法（以less為例）

1. 安裝插件

• 安裝方法1：先安裝 css 預(yù)處理插件 less, less-loader, 然后安裝 style-resources-loader ， 再安裝 vue-cli-plugin-style-resources-loader。vue 項(xiàng)目中需要 安裝 這四個插件。
• 安裝方法2： 直接使用vue add style-resources-loader安裝 ，會提示選擇預(yù)處理器。

vue add style-resources-loader  

2. 配置 具體見 https://github.com/yenshih/style-resources-loader

在 vue-cli中的配置

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 這個是絕對路徑,不能使用 alias中配置的別名路徑，如@表示的src
                path.resolve(__dirname, './src/style/params.less')
            ]
        }
    },
    ……
    其他配置
    ……
}

在普通webpack 中的配置, 可以同時使用 多個預(yù)處理器。

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'less-loader', 'less-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [ // 只有一條時也可以寫成對象形式
                        path.resolve(__dirname, 'path/to/scss/variables/*.less'),
                        path.resolve(__dirname, 'path/to/scss/mixins/*.less'),
                    ],
                    injector: 'append' // 如果在樣式文件之后導(dǎo)入就加此行配置
                }
            }]
        }]
    },
    // ...
}

options選項(xiàng)的參數(shù)

patterns：字符串或數(shù)組，表示導(dǎo)入資源的路徑，必須是絕對路徑
injector：‘prepend’ 或者 ‘a(chǎn)ppend’， 表示資源導(dǎo)入的位置，在之前還是之后，樣式后導(dǎo)入的會覆蓋前面導(dǎo)入的
resolveUrl： 是否允許@import形式導(dǎo)入，默認(rèn)true