溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue-cli4如何使用全局less文件中的變量配置？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
目錄結構如下：
需求：
在Navgation.vue中使用global.less中的變量
vue-cli4的配置方法如下：
安裝 style-resources-loader
npm i style-resources-loader -D
在 vue.config.js 中加上如下配置，沒有則創建該文件，文件名不能改，如下：
// vue.config.js
const path = require('path')
module.exports = {
lintOnSave: false,
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less這里寫你的樣樣式類型').oneOf(type)))
},
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/css/global.less這里寫你的全局樣式地址'),
],
})
}補充知識：vue項目中配置LESS全局變量注入
在日常項目中，很多人都用到了css預處理器 ，如sass，less， stylus，處理樣式非常方便，尤其是嵌套，變量，函數等，讓我們書寫css非常nice，在項目中一般會建立一個樣式文件夾（此處用less），存放公共樣式和公共變量如項目主體色，字體大小等等的變量，但是在項目中使用這些變量的時候通常都要在style標簽內用@import '***/***/***/***.less';這樣的方式來導入公共變量，頁面一多，每個頁面一般都需要引入就會感到很繁瑣，所以此處就用到webpack的一些配置來達到全局注入，單個文件不需要單獨引入的目的。
此處說下自己用的之前的腳手架版本的配置
在build文件夾下的webpack.base.conf.js文件中修改，主要借助了sass-resources-loader。
配置的時候還需要在問價頭部引入path，const path = require('path')
然后在module模塊下進行配置
module: {
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
// 順帶說下 此處可以配置路徑別名，以后引入文件就不需要../../../這樣了，直接@/就可以了，代表src下的路徑，當然可設置多個，可自行配制
alias: {
'@': utils.resolve('src')
}
},
///
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
// /-------------
{
test: /\.less$/,
use: [{
loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'vue-style-loader'
}, {
loader: 'css-loader',
options: {
sourceMap: cssSourceMap
}
}, {
loader: 'less-loader',
options: {
sourceMap: cssSourceMap
}
}
//此處開始------/
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '此處寫自己配置的公共變量文件路徑，比如../src/themes/publicStyle/common.less')
]
}
//此處結束-------/
}]
},然后說下自己查資料研究的cli3下的全局變量注入
cli3 與之前的cli不一樣了，build和config文件沒有了 ，所有的配置都需要在自己新建的vue.config.js文件里進行配置，具體配置官方文檔和各種資料都很詳細，在這就不詳述了，在這就說下自己練手的一些配置，僅供參考，主要看全局變量注入那塊，主要用的是style-resources-loader ，npm i style-resources-loader -D
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
publicPath: "./",
outputDir: "dist",
assetsDir: "assets",
indexPath: "index.html",
filenameHashing: true,
pages: undefined,
lintOnSave: true,
runtimeCompiler: false,
transpileDependencies: [],
productionSourceMap: false,
crossorigin: undefined,
integrity: false,
devServer: {
proxy: {
"/api": {
target: "************",
changeOrigin: true,
pathRewrite: { "^/api": "" }
}
}
},
// ------------------此處開始，以下是全局變量注入的配置--------------
chainWebpack: config => {
config.resolve.alias.set("@assets", resolve("src/assets"))
// 這里只寫了兩個個，你可以自己再加，按這種格式.set("", resolve(""))
const types = ["vue-modules", "vue", "normal-modules", "normal"]
types.forEach(type =>
addStyleResource(config.module.rule("less").oneOf(type))
);
},
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
};
function addStyleResource(rule) {
rule
.use("style-resource")
.loader("style-resources-loader")
.options({
patterns: [
path.resolve(__dirname, "src/styles/index.less") // 需要全局導入的less
]
})
}大家一起加油！ 如有不對之處，請大家不吝賜教。
之后看到另一個后臺管理系統的配置，發現另一種配法 （cli3）
安裝less less-loader style-resources-loader
npm install -D less-loader less npm i style-resources-loader npm i vue-cli-plugin-style-resources-loader
安裝完后，在vue.config.js中配置
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 這個是加上自己的路徑,不能使用(如下:alias)中配置的別名路徑
path.resolve(__dirname, './src/style/params.less')
]
}
},
……
其他配置
……
}安裝的時候也可以方法二：直接使用vue add style-resources-loader安裝，vue add pluginName 是vue-cli3提供的。
vue add 是用yarn安裝插件的， yarn源的問題有可能導致失敗。
如果安裝失敗的話，就上面分別安裝的方法來
關于vue-cli4如何使用全局less文件中的變量配置問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
