1、npm install sass-resources-loader --save-dev;
2、build/utils.js中,在
function generateLoaders (loader, loaderOptions){}
上面或者下面添加以下代碼function resolveResource(name) {
return path.resolve(__dirname, '../src/assets/css/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
// 'postcss-loader',
'less-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResource('basic.less')]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
其中resolveResource中的‘../src/assets/css’換成自己的less/sass文件的路徑,generateSassResourceLoader中
resources:[resolveResource('basic.less')]的basic.less換成自己的less/sass文件名;(注意:如果是sass,則
var loaders = [
cssLoader,
// 'postcss-loader',
'less-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResource('basic.less')]
}
}
];
中的‘less-loader’需要改爲 'sass-loader');
3、build/utils.js中,把
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
less: generateLoaders('less') 替換成 less: generateSassResourceLoaer()
4、npm run dev,然後就完成了。