vue-cli配置全局sass、less變量的方法
更新時間：2019年06月06日 11:18:27 作者：敏小靜
這篇文章主要介紹了vue-cli配置全局sass、less變量的方法，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
一、全局配置less
1.下載插件
**vue add style-resources-loader** vue add pluginName 是vue-cli3提供的。vue add 是用yarn安裝插件的， yarn源的問題有可能導致失敗。如果上面安裝失敗的話，就分別安裝 style-resources-loader 和 vue-cli-plugin-style-resources-loader（前提是已經(jīng)安裝過 less less-loader） // 沒有出錯的話，可以無視這里 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 或 yarn add 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")
]
}
}
...
}
或者使用官網(wǎng)的自動導入在chainWebpack中引入
https://cli.vuejs.org/zh/guid...
二、全局配置sass（直接配置vue.config.js）
注意：官網(wǎng)獨愛sass，這種loader的形式只有sass才合適用，其他的（less、stylus）都會報錯。
module.exports = {
...
css: {
loaderOptions: {
sass: {
// @是src的別名
data: `
@import "@/assets/variable.scss";
`
}
}
}
...
}
總結
以上所述是小編給大家介紹的vue-cli配置全局sass、less變量的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了vue計算屬性computed的使用方法,結合實例形式分析了vue計算屬性computed的基本用法及相關操作注意事項,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細介紹了vue組件封裝實現(xiàn)抽獎隨機數(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了基于vue開發(fā)的在線付費課程應用過程，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
Vue.js devtool插件最近在開發(fā)人員中很火，這篇文章主要為大家詳細介紹了Vue.js devtool插件安裝后無法使用，出現(xiàn)提示“vue.js not detected”的解決辦法2017-11-11
vue 解決setTimeOut和setInterval函數(shù)無效報錯的問題
這篇文章主要介紹了vue 解決setTimeOut和setInterval函數(shù)無效報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
elementPlus?的el-select在提示框關閉時自動彈出的問題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關閉時自動彈出閉時自動彈出的問題,主要問題就是因為filterable屬性,根本解決方案是選中的時候讓他失去焦點?el-select有一個visible-change事件,下拉框出現(xiàn)/隱藏時觸發(fā),感興趣的朋友跟隨小編一起看看吧2024-01-01
這篇文章主要為大家詳細介紹了Vue實現(xiàn)控制商品數(shù)量組件的封裝及使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue路由與a標簽鏈接錨點發(fā)生沖突問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
VueX?mapGetters獲取Modules中的Getters方式
這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11