首先 运行这行命令
npm install sass-resources-loader --save-dev;
在项目的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)
}
}
注:
1、 resolveResource中的‘../src/assets/css’换成自己的less/sass文件的路径;
2、generateSassResourceLoader中 resources:[resolveResource('basic.less')]的basic.less换成自己的less/sass文件名
3、如果用的是sass,则把下面的中的‘less-loader’需要改为 'sass-loader'
var loaders = [
cssLoader,
// 'postcss-loader',
'less-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResource('basic.less')]
}
}
];
然后在build/utils中,找到下面的代码
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()
最后重新运行一下项目,ok
参考文章:https://blog.csdn.net/u014292161/article/details/79193381