Loader

style-resources-loader 利用此loader将款式资源（例如变量、mixin）注入到sass、scss、less、stylus等模块中通过在工作中的利用场景，来介绍此loader用法和一些发散的点 场景需要我的项目构造如下： ├─views ├─componets 组件目录 | ├─brand1 组件1 | ├─cmp.vue | ├─... | └─brand2 组件2 | ├─cmp.vue | ├─... ├─theme 主题目录 (每个主题中色彩变量可能会反复) | ├─brand1.less 组件1主题色彩变量 | └─brand2.less 组件2主题色彩变量 | └─other.less 其余主题色彩变量 └─... 需要： 组件目录应用对应的主题色彩变量，其余目录应用主题3色彩变量应用主题色彩变量时不须要每次独自@import '@/theme/brandx.less'解决方案module: { rules: [ { test: /\.less$/i, use: [MiniCssExtractPlugin.loader, "css-loader", 'less-loader'], }, { test: /components\\brand1.*\.less$/i, use: [{ loader: 'style-resources-loader', options: { patterns: [path.resolve(__dirname, 'src/theme/brand1.less')] }, }], }, { test: /components\\brand2.*\.less$/i, use: [{ loader: 'style-resources-loader', options: { patterns: [path.resolve(__dirname, 'src/theme/brand2.less')] }, }], }, { test: /[^components\\].*\.less$/i, use: [{ loader: 'style-resources-loader', options: { patterns: [path.resolve(__dirname, 'src/theme/brand3.less')] }, }], }, ] },发散点loader匹配规定loader会把非js的文件转换为js文件，不同类型的文件依据定义的rules中不同test去匹配相应的loader进行解决，这里对vue组件中款式文件的解决其实是先通过了vue-loader将.vue文件中的<style lang="less">局部转换为less文件后，再由其余匹配此规定的loader进行解决 ...