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

Posted 2023-02-22

【中文标题】将 Sass/Scss 全局加载到 Vue 项目中

【英文标题】：Globally load Sass/Scss into a Vue Project

【发布时间】：2020-04-05 01:39:32

【问题描述】：

所以，当我使用 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";
        `
       
     
    
   ;

【问题讨论】：

您使用的是sass 还是node-sass？您可以添加vue.config.js 的相关部分吗？

哦，是的，我现在将使用该信息更新我的问题

你可以尝试将配置中的sass: 更改为scss: 吗？

@MichalLevý 刚刚试了一下并抛出了同样的错误：/

【参考方案1】：

好的，以前只是使用“数据：”的情况 但是，从 Vue 4 开始，它现在似乎必须是“prependData:”

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

【参考方案2】：

改为additionalData

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