四时宝库

一、配置全局less变量

第一步

执行vue add style-resources-loader

 vue add style-resources-loader

vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果上面安装失败的话，就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader（前提是已经安装过 less less-loader）

// 没有出错的话，可以无视这里（i 代表install -D 代表--save-dev）
 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 
 //或 
 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
//或 
 cnpm i style-resources-loader vue-cli-plugin-style-resources-loader -D

第二步配置vue.config.js

 const path = require("path");
 module.exports = {
 pluginOptions: {
 "style-resources-loader": {
 preProcessor: "less",
 patterns: [
 //这个是加上自己的路径，
 //注意：试过不能使用别名路径
 path.resolve(__dirname, "./src/assets/variable.less")
 ]
 }
 } 
 }

二、配置全局sass变量

直接配置vue.config.js

 module.exports = {
 css: {
 loaderOptions: {
 sass: {
 // @是src的别名
 data: `
 @import "@/assets/variable.scss";
 `
 }
 }
 }
 }