将Sass / Scss全局加载到Vue项目中

时间:2019-12-11 17:50:16

标签: vue.js vue-cli vue-cli-4

因此,当我使用Vue-cli 3.X时,我使用了一种类似于This Thread的方法来全局加载我的许多样式文件。

但是,我已经升级到Vue-cli 4.X,此后一直无法使用此技术。我只是收到此错误:

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$grey-700".
        on line 8 of src/styles/global.scss
        from line 12 of /Users/kieranparker/Desktop/Personal/Side Projects/Dev/landingpages/src/App.vue
>>         color: $grey-700;

   ---------------^

基本上,主屏幕之外的任何内容(例如组件)都不会在我的“ _variables.scss”中获取任何内容。 (即使我将它们全部导入到一个文件中并使用该文件)

有什么建议吗?

(快速更新) 我正在使用node-sass,我的配置看起来像这样;

    module.exports = {
     css: {
      loaderOptions: {
       sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
       }
     }
    }
   };

2 个答案:

答案 0 :(得分:0)

好吧,以前是只使用“数据”的情况: 但是,从Vue 4开始,现在看来它必须是“ prependData:”

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/styles/_variables.scss";`
      }
    }
  }
}

答案 1 :(得分:0)

它已更改为additionalData

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