溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在新版的Vue CLI 3中，如何導入公共less文件在文檔里已經描述的很清楚了，但是在2.*的版本中，我沒有查到相關的辦法，網友的辦法又相當復雜，于是我推薦給大家一個很簡單的辦法。
首先，會用到webpack中的資源預處理器Style Resources Loader，所以需要：
npm i style-resources-loader -D
然后在build/utils.js文件中可以找到CSS預處理器的實現方式：
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
簡單的看下來就是需要哪種類型的樣式就去加載對應的預處理器，因此只需要在加載less文件的情況下，多加一種Style Resources Loader預處理器就可以解決問題，所以只要加上如下代碼，即可實現。
if (loader) {
...
}
if(loader == 'less'){
loaders.push({
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/assets/config/*.less')
}
})
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
