vue-cli3項目中全局引入less sass文件 以及使用本地圖片在不同地方規則

第一種直接在main.js中引入，需要聲明loader

demo：

import '!style-loader!css-loader!less-loader!./assets/css/common.less'

這樣可以實現common.less樣式的全局作用域，但是不能在局部vue文件中使用less中聲明的變量

第二種使用style-resourses-loader這個loader，官網上也有說明，查了很多都是這種方法：

安裝loader

npm install style-resources-loader -D

在vue.config.js中配置pluginOptions

如下：

// 第三方插件配置
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [path.resolve(__dirname, "./src/assets/css/common.less")]
}
}

項目可以啟動但是樣式沒有加載，里面的變量也不能使用，不知道怎么回事兒

3 配置css中的loaderOptions：

官方文檔上只有sass的例子：

demo

css:{
　　loaderOptions:{
　　　　sass:{
　　　　　　//要處理的sass文件路徑
　　　　　　data:`@import "~@/assets/css/common.less";`
　　　　　　}
　　}

親測可以，實現全局樣式引入以及局部vue文件中可以使用sass文件中定義的變量；

參考文檔 https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9

如果是less文件，則只能定義全局變量，不能直接引入文件：

css:{
　　loaderOptions:{
　　　　less:{
　　　　　　//全局變量名
　　　　　　globalVars:{
　　　　　　　　　　color1:'red';
　　　　　　　　}
　　　　　　}
　　}
}

親測可以參考文檔： http://lesscss.org/usage/#less-options

 

 

 

 

在sass less文件中定義元素的背景圖路徑問題：

 background: url("~../assets/logo.png");

如果直接寫在vue文件的style標簽中，直接相對路徑就可以，css文件中也是，less scss文件中需要在路徑前面加上~，在img標簽中引入本地的圖片，也直接寫相對路徑就可以了；

在data中聲明數據，有圖片的本地路徑，需要使用模塊引入的方法：

require('../assets/logo.png')