vue-cli2:引入less和配置less变量可全局使用
一.安装lessnpm i less less-loader --save-dev二.设置less变量到全局// 1.安装sass-resources-loadernpm install sass-resources-loader --save-dev// 2.配置build/utils.js,找到exports.cssLoaders函数,如下exports.cssLoaders ...
·
版本说明:本文档针对vue-cli2
一.安装less
npm i less less-loader --save-dev
二.设置less变量到全局
// 1.安装sass-resources-loader
npm install sass-resources-loader --save-dev
// 2.配置build/utils.js,找到exports.cssLoaders函数,如下
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// 此处添加配置
// 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: generateLoaders('less'), // 第二步更改这里
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
在上面注释“// 此处添加配置”处添加如下代码:
// 配置less变量全局
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/style/var.less'), // ../src/assets/style/var.less为你的全局less变量的文件目录
]
}
}
]
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
3.更改exports.cssLoaders函数的return参数,将less: generateLoaders(‘less’)改为 less: lessResourceLoader(‘less’),如下:
return {
css: generateLoaders(),
postcss: generateLoaders(),
// less: generateLoaders('less'), // 更改这里为下面一行
less: lessResourceLoader('less'), // lessResourceLoader即第一步添加的函数名
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
经过上面两处更改后,exports.cssLoaders函数如下:
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// 第一步:配置less变量全局
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/style/var.less'), // ../src/assets/style/var.less为你的全局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: generateLoaders('less')更改为 less: lessResourceLoader('')
// less: generateLoaders('less'),
less: lessResourceLoader(''),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
重启项目即可
更多推荐
已为社区贡献2条内容
所有评论(0)