在vue開發(fā)前期準(zhǔn)備工作中..遇到這樣個(gè)問題菱父。想把共有的變量封裝在variable.less里。還有extends.less等其他文件剑逃，把他們統(tǒng)一放置layout.less然后在app頁引用浙宜。在app頁成功的引用到里頭的變量以及封裝的函數(shù)，但在子組件中炕贵，會(huì)報(bào)變量undefined錯(cuò)梆奈。嘗試過在入口js導(dǎo)入那個(gè)共有l(wèi)ess，也嘗試過使用文件的引用來獲取称开，但都沒有效果。如果在子組件中導(dǎo)入一次共有變量的話，行得通鳖轰。但清酥，這不是我想要的。如果有多個(gè)組件的蕴侣，一個(gè)個(gè)導(dǎo)入就太麻煩了焰轻，也使得該項(xiàng)目的大小增加了不少，運(yùn)行速度當(dāng)然可想而知..經(jīng)過一早上的查找和嘗試,終于找到一種方法昆雀。
接下來就分享下我的方法把~
npm install sass-resources-loader --save-dev- 在目錄結(jié)構(gòu)的
build/utils.js中exports.cssLoaders模塊中再加多一個(gè)函數(shù)
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'less-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/styles/shared/variable.less'),
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// generate loader string to be used with extract text plugin
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)
}
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: lessResourceLoader(), //這里的lessResourceLoader就是上面的方法
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
其中'../src/styles/shared/variable.less'路徑改成自己對(duì)應(yīng)的文件
然后再return{}塊中的less: generateLoaders('less') 替換成 less: lessResourceLoader()
- 再重新
npm run dev下就好了
sass 也是一樣的道理辱志。把less-loader改為sass-loader即可。
