1.第一步：
npm install sass-resources-loader --save-dev
2.然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码：
function lessResourceLoader() {
var loaders = [
cssLoader,‘less-loader‘,{
loader: ‘sass-resources-loader‘,options: {
resources: [
path.resolve(__dirname,‘../src/assets/styles/common.less‘),]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,fallback: ‘vue-style-loader‘
})
} else {
return [‘vue-style-loader‘].concat(loaders)
}
}
@H_404_16@
path.resolve(__dirname,‘../src/style/style.less‘)路径改成自己对应的文件
然后后面将 return{} 块中的 less: generateLoaders(‘less‘) 替换成上面自定义的函数 less: lessResourceLoader()
结果如下
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: ‘css-loader‘,options: {
sourceMap: options.sourceMap
}
}
var postcssLoader = {
loader: ‘postcss-loader‘,options: {
sourceMap: options.sourceMap
}
}
function lessResourceLoader() {
var loaders = [
cssLoader,{
loader: ‘sass-resources-loader‘,options: {
resources: [
path.resolve(__dirname,‘../src/style/style.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)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),postcss: generateLoaders(),less: lessResourceLoader(‘less‘),sass: generateLoaders(‘sass‘,{ indentedSyntax: true }),scss: generateLoaders(‘sass‘),stylus: generateLoaders(‘stylus‘),styl: generateLoaders(‘stylus‘)
}
}
@H_404_16@
修改完配置文件记得重启服务器：npm run dev
ok,style.less如下:
修改完配置文件记得重启服务器：npm run dev
ok,style.less如下:
@sidebar:240px; @headerHeight:65px; @bodyMinWidth: 700px; @H_404_16@注意，赋值不是等号
在组件中，就可以使用全局变量了。.content { background:red; height:auto; margin-left: @sidebar; width: calc(100%[email protected]); } </style>@H_404_16@好用！贼好用。
