vue-cli/webpack4.x 打包--webpack配置--样式

css

有的时候你想要向 webpack 的预处理器 loader 传递选项。

可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Less 样式传入共享的全局变量：

 css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {'primary-color': process.env.VUE_APP_PRIMARY_COLOR}, //配置主题颜色变量的地方
          javascriptEnabled: true
        }
      }
    }
  },

pluginOptions

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'node_modules/styles/custom.less.less'),
        path.resolve(__dirname, 'src/assets/styles/_constant.less')
      ]
      // 引入全局样式变量
    }
  },

 

依赖版本

"less": "3.0.4",

"less-loader": "^6.0.0",

"style-resources-loader": "1.4.1",

"vue-cli-plugin-style-resources-loader": "0.1.5",