Vue-cli3配置全局 Sass/Less 变量

配置Sass

1、创建variable.scss文件

 $theme-color: #ff00ff;

2、配置vue.config.js中的cssloader

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/styles/variable.scss";
        `
      }
    }
  }
}

3、在.vue中使用

经过上面的配置，就可以直接在某个.vue文件中的style中使用变量了，而不需要每次都import这个变量文件

配置Less

1、创建variable.less文件

 @theme-color: #ff00ff;

2、Less需要下载style-resources-loader

npm i style-resources-loader -D

3、配置vue.config.js

const path = require('path');
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
          path.resolve(__dirname, '@/assets/styles/variable.less'),
      ],
    },
  },
};

4、在.vue中使用

经过上面的配置，就可以直接在某个.vue文件中的style中使用变量了，而不需要每次都import这个变量文件