Vue scss 引入变量报错

最新推荐文章于 2025-06-26 14:48:15 发布

转载最新推荐文章于 2025-06-26 14:48:15 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_30436011/article/details/120490153

文章标签：

#css3 #vue

vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

css3

8 篇文章

订阅专栏

本文介绍如何在Vue项目中实现CSS预编译语言（Sass/Less/Stylus）的全局变量引用。通过三种方法：css.loaderOptions、chainWebpack及pluginOptions，实现变量在项目的全局可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网css引入配置

参考文章

我在项目里自定义了vue.config.js的rules关于scss的loader所以我是直接子啊loader配置options就可以

{
test: /\.scss$/,
loader: "sass-loader",
options: {
additionalData: `@import "@/theme/var.scss";`,
}
}

关于cass的options配置属性名不同版本会有不同定义，具体要看自己的版本

如果不是自定义了loader可以使用下面的配置来实现loader的加载项

sass/scss篇

sass/scss文件与vue组件样式代码

/* variable.scss */
$color: orange;
// vue组件内的style标签，将要使用上述变量的地方
<style lang="scss">
.scss div {
color: $color;
}
</style>

sass 全局变量引入方法一

使用css.loaderOptions
此处友情提示 sass-loader v7 之前使用 data：’’ 之后使用prependData：‘’请根据项目sass-loader版本选择
重点提示！！！！引用处分号“；”不能缺少，缺少直接报错，因为此方法是直接插入语句块至项目中使用sass语法的标签内，sass语法强制必须使用分号“；”结尾，更详细讲解请参考vue-cli官方文档。

module.exports = {
css: {
loaderOptions: {
sass: {
// data：`@import "~@/assets/variable.scss";` v7之前使用的是data，现在改成了prependData
prependData: `@import "~@/assets/variable.scss";`
/* prependData: `
@import "~@/assets/variable.scss";
@import "~@/assets/variable2.scss";
` */
}
}
}
}

sass 全局变量引入方法二

使用chainWebpack
根据使用方法选择安装插件 style-resources-loader或者sass-resource-loader
友情提醒：**patterns: “./src/assets/variable.scss”**引用的scss文件，如果文件内语法存在问题，也会直接报错，此处不需要在引用处最后添加分号“；”，文件内请根据sass与scss语法规则编辑，如果我没有料错，此方法应该是把引用文件的内容插入目标文件，而非上文方法提到的插入一个import
使用方法代码如下：

module.exports = {
chainWebpack: config => {
// 需要安装 style-resources-loader 插件
const oneOfsMap = config.module.rule("scss").oneOfs.store;
oneOfsMap.forEach(item => {
item
.use("style-resources-loader")
.loader("style-resources-loader")
.options({
// 需要插入的文件路径
patterns: "./src/assets/variable.scss"
// 需要插入的文件路径数组
// patterns: ["./path/to/vars.styl", "./path/to/mixins.styl"]
})
.end();
});
// 也可以使用 sass-resource-loader 插件
// const oneOfsMap = config.module.rule("scss").oneOfs.store;
// oneOfsMap.forEach(item => {
// item
// .use("sass-resources-loader")
// .loader("sass-resources-loader")
// .options({
// // 需要插入的文件路径
// resources: "./src/assets/variable.scss"
// // 需要插入的文件路径数组
// // resources: ["./path/to/vars.scss", "./path/to/mixins.scss"]
// })
// .end();
});
}
}

sass 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

const path = require("path");
module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
// patterns: "./src/assets/variable.scss",
patterns: [path.resolve(__dirname, "./src/assets/variable.scss")]
}
}
}

less篇

less文件与vue组件样式代码

/* variable.less */
@color: pink;
// vue组件内的style标签，将要使用上述变量的地方
<style lang="less">
.less {
> div {
color: @color;
}
}
</style>

less 全局变量引入方法一

使用css.loaderOptions
less此方法只支持变量key:value赋值，若要使用less文件中变量，请使用以下两种方案

module.exports = {
css: {
loaderOptions: {
less: {
globalVars: {
"@color": "#f00"
}
}
}
}
}

less 全局变量引入方法二

使用chainWebpack
需要安装 style-resources-loader 插件

module.exports = {
chainWebpack: config => {
// 需要安装 style-resources-loader 与stylus一致
const oneOfsMap = config.module.rule("less").oneOfs.store;
oneOfsMap.forEach(item => {
item
.use("style-resources-loader")
.loader("style-resources-loader")
.options({
// 需要插入的文件路径
patterns: "./src/assets/variable.less"
// 需要插入的文件路径数组
// patterns: ["./path/to/vars.less", "./path/to/mixins.less"]
})
.end();
});
}
}

less 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: "./src/assets/variable.less"
// patterns: ["./src/assets/variable.less"]
}
}
}