为什么我在 vue.config.js 中的代码不起作用？答案

【问题标题】：Why is my code in vue.config.js not working?为什么我在 vue.config.js 中的代码不起作用？
【发布时间】：2021-03-17 10:45:14
【问题描述】：

vue.config.js 没有运行

我正在开发 Vue 项目，我使用 vue-cli 创建了它。我在 vue.config.js 中编写了这段代码，而不是 @import variables.scss 和 mixins.scss 手动到我的所有组件。

module.exports = {
 css: {
  loaderOptions: {
   sass: {
    additionalData: `
      @import "@/assets/styles/_variables.scss";
      @import "@/assets/styles/_mixins.scss";
      `,
   },
  },
 },
}

vue.config.js 是 in the root of project 与 package.json 相同。（点击超链接查看图片）
在我的 src 文件夹中：src/assets/styles/_variable.scss

但是，Vue 不会读取 vue.config.js 中的代码

这是我的依赖项和 devDependencies

"dependencies": {
  "axios": "^0.21.0",
  "bootstrap": "^4.5.3",
  "bootstrap-vue": "^2.20.1",
  "core-js": "^3.6.5",
  "moment": "^2.29.1",
  "vue": "^2.6.12",
  "vue-router": "^3.4.9",
  "vuelidate": "^0.7.6",
  "vuex": "^3.6.0"
},
 "devDependencies": {
   "@vue/cli-plugin-babel": "~4.5.0",
   "@vue/cli-plugin-eslint": "~4.5.0",
   "@vue/cli-service": "~4.5.0",
   "babel-eslint": "^10.1.0",
   "eslint": "^6.7.2",
   "eslint-plugin-vue": "^6.2.2",
   "node-sass": "^5.0.0",
   "sass-loader": "^10.1.0",
   "vue-template-compiler": "^2.6.11"
  },

当我运行npm run serve 时，出现以下错误

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$secondary-color".
    on line 50 of src/components/BlogItem.vue
   >>       color: $secondary-color;

我需要安装一些软件包吗？ 或者我应该更改 sass-loader 的版本吗？

【问题讨论】：

“它不起作用”是什么意思。我有同样的“未知”问题，但我的作品恰到好处。
@CristianoSoleti 我尝试了不同的方法，比如改变路径，sass 到 scss。然后，我看到 Vue 也没有读取 vue.config 中的 devServer: { proxy : { //some code }} 对象。因此，我决定“未知”是问题所在。如果它在您的代码中正常工作，那么导致问题的原因是什么？
您仍然没有回答“不工作”的问题。这对你意味着什么？我们可以有任何堆栈跟踪或屏幕截图吗？您可以做的最简单的测试就是更改开发服务器端口。
@CristianoSoleti 我的意思是 Vue 不阅读代码。好像，它没有看到 vue.config 文件。我不知道如何用其他词语来解释这一点。我创建了 vue.config 文件并添加了this 代码。我所做的就是这个。
unknown 与您的问题无关，这很正常，对每个人来说都是如此。您的 additionalData 语法看起来不错，但您的问题令人困惑。你说：“不 @import”？所以你不想导入？

标签： javascript vue.js webpack sass-loader

【解决方案1】：

我遇到了类似的问题。问题是我忘了在 App.vue 文件中写 <style lang="scss">。或许对你有帮助。

【讨论】：

这就是我的情况。谢谢

【解决方案2】：

似乎您的代码正在尝试 @import _variables.scss 并且文件名实际上是 _variable.scss :o)

【讨论】：