文档
结合网上诸多无效方法,整理如下
方式一
注意是vue安装,不是npm!!!
vue add style-resources-loader
安装过程中选择less
修改根目录 vue.config.js 的patterns
参数
// vue.config.js
const path = require("path");
module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [path.resolve(__dirname, "src/global.less")]
}
}
};
方式二
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 给 less-loader 传递 Less.js 相关选项
less:{
additionalData: `@import "~@/variables.less"`
}
}
}
}
方式三
cnpm i style-resources-loader -D
module.exports = {
// 安装:style-resources-loader
chainWebpack: (config) => {
const oneOfsMap = config.module.rule("less").oneOfs.store;
oneOfsMap.forEach(item => {
item
.use("style-resources-loader")
.loader("style-resources-loader")
.options({
// 这里的路径不能使用 @ 符号,否则会报错
// patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"]
patterns: "./src/assets/reset.less"
})
.end()
})
}
};
vitejs配置方式
文档
// vite.config.js
export default defineConfig({
css: {
preprocessorOptions: {
less: {
additionalData: `@import "~@/variables.less"`
}
}
}
})