Vue SASS 无法全局加载

Question

您好，我正在尝试在新的 VUE 项目中全局设置 sass。我试了很多次，还是不行。 这里是 vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: ' @import \'@/sass/variables.sass\';',
      },
    },
  },
};

只是基本的 sass 文件

$base-color: #c6538c

并在基础 App.vue 中使用它

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

<style lang="sass">

#nav
  padding: 30px

  a
    font-weight: bold
    color: $base-color

    &.router-link-exact-active
      color: #42b983

</style>

这是我使用的所有版本的 package.json。

{
  "name": "vertical-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  }
}

我将非常感谢一些建议。谢谢！

Answer 1

尝试以这种格式在你的 vue.config.js 文件中添加它

module.exports = {
 css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/variables.scss";' // Example path
      },
    },
  },
};

或更好地将您的版本降级到

"sass-loader": "7.3.1",

并且配置将使用数据属性

module.exports = {
 css: {
    loaderOptions: {
      sass: {
        data: '@import "~@/styles/variables.scss";' // Example path
      },
    },
  },
};