Vue.js 更改vue.config中sass加载程序的选项

我不知道如何使用

vue.config

更改

sass加载程序的设置，因为有一个
webpack.config
，但是我的项目没有，我认为我不应该有一个，因为根据我应该使用
vue.config

命令
vue inspect
包含字符串
loader:'sass loader'，
8次，因此我不确定要更改什么

我的源代码如下：


.某个班级{
边界底部：100像素稳定$alert；
}

然后我想使用
vue.config
将
webpack
的值调整为：

{
加载器：“sass加载器”，
选项：{
prependData:“$alert:”+process.env.alert_COLOR+”；”，
}
}

我怀疑我必须更改以下条目（来自
vue inspect
）：

/*config.module.rule（'scss'）。其中一个（'vue-modules'））*/
{
resourceQuery:/module/，
使用：[
{
加载程序：“vue样式加载程序”，
选项：{
sourceMap:false，
阴影模式：false
}
},
{
加载器：“css加载器”，
选项：{
sourceMap:false，
进口装载机：2，
模块：对，
localIdentName:'[name].[local].[hash:base64:5]'
}
},
{
加载器：“postss加载器”，
选项：{
sourceMap:false
}
},
{
加载器：“sass加载器”，
选项：{
sourceMap:false，
实施：{
运行：函数（）{
返回_调用（f，Array.prototype.slice.apply（参数））；
},
render:function（）{
返回_调用（f，Array.prototype.slice.apply（参数））；
},
renderSync:function（）{
返回_调用（f，Array.prototype.slice.apply（参数））；
},
信息：“dart sass\t1.23.0\t（sass编译器）\t[dart]\ndart2js\t2.5.1\t（dart编译器）\t[dart]”，
类型：{
布尔值：函数（）{
返回_调用（f，Array.prototype.slice.apply（参数））；
},
颜色：函数（）{
返回_调用（f，this，Array.prototype.slice.apply（参数））；
},
列表：函数（）{
返回_调用（f，this，Array.prototype.slice.apply（参数））；
},
Map:function（）{
返回_调用（f，this，Array.prototype.slice.apply（参数））；
},
Null:function（）{
返回_调用（f，Array.prototype.slice.apply（参数））；
},
编号：函数（）{
返回_调用（f，this，Array.prototype.slice.apply（参数））；
},
字符串：函数（）{
返回_调用（f，this，Array.prototype.slice.apply（参数））；
},
错误：函数错误（）{[本机代码]}
}
}
}
}
]
}
阅读您链接的文档，我猜是这样的：

vue.config.js

module.exports={
链接网页包：配置=>{
const cssRule=config.module.rule（'css'）
//清除所有现有装载机。
//如果不这样做，下面的加载程序将附加到
//规则的现有加载程序。
cssRule.uses.clear（）
//添加替换加载器
cssRule
.use（'sass-loader'）
.loader（'sass-loader'））
.tap（选项=>{
//修改选项。。。
返回选项
})
}
}

并添加所需的
sass
选项，即
修改选项

值得注意的是，
cssRule.uses.clear（）
将清除以前的CSS规则。我认为你需要这样做，否则你可能会有冲突的规则。如果您发现它正在删除您需要的规则，我会手动将其添加回（与您添加
sass
的方式相同）在我的vue.config中，以下操作似乎有效

const path=require（'path'）

在
\u colors.css中，我可以只设置变量：
$alert:red；
我无法确认这是否有效，但我同意了。谢谢你的回答，我稍后会尝试一下，让你知道它是否有效。
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "Theme/_colors.scss";
        `,
      },
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        Theme: path.resolve(
          __dirname,
          `src/themes/${process.env.THEME || 'light'}/`
        ),
      },
   },
  },
};