vue cli3 预处理器配置全局变量

在vue cli3中使用预处理器(Sass/Less/Stylus)配置全局变量详细总结。在创建项目时就可以选择安装预处理器了,如果没有安装可以通过如下命令进行安装。

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

STEP1

一定一定少不了安装style-resources-loader

npm i style-resources-loader -dev

然后添加

vue add style-resources-loader

STEP2

在vue.config.js中进行配置,如果没有自己创建就好(与package.json同级)

官方写法

详情见:Vue CLI CSS相关

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
    //stylus为你自己使用的预处理器名自行更换
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './预处理器文件所在路径'),
      ],
    })
}

更简单的写法

这两种写法效果相同

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: "less",
      // 指定全局变量的less文件
      patterns: [path.resolve(__dirname, "src/assets/less/theme.less")] 
      // 同上文件路径
    }
  },
}

完成

完成后重启服务

npm run serve

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!

服务器部署node 上一篇
vue cli 解决跨域 线上 nginx 反向代理配置 下一篇