在项目,当我们使用到一些全局的样式,例如全局主题,边距等等,原生css用--变量名
去实现,less中需要我们去用@去定义些变量,但是在vue的文件中,无法直接去使用全局变量,ok,直接上代码!
注意:确保你项目中已经配置好了less-loader哦
vue-cli2中
安装sass-resources-loader
npm install sass-resources-loader
在build/utils.js
中配置
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
})
})
}
// 添加这段代码--------------
if (loader === "less") {
loaders.push({
loader: "sass-resources-loader",
options: {
resources: path.resolve(__dirname, "../src/styles/variables.less") // 这里是你的变量文件路径
}
});
}
// 结束---------------------
// 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)
}
}
搞定
vue-cli3
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
在vue.config.js
配置
module.exports = {
...
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
// 你自己的变量路径
path.resolve(__dirname, "./src/assets/variable.less")
]
}
}
...
}