如何在 Vue3 + dart-sass 中添加 scss 文件？答案

【问题标题】：How to prepend scss files in Vue3 + dart-sass?如何在 Vue3 + dart-sass 中添加 scss 文件？
【发布时间】：2022-08-13 07:41:51
【问题描述】：

我正在尝试将 scss 文件添加到我的项目中。这是我的vue.config.js：

const {defineConfig} = require(\'@vue/cli-service\');
module.exports = defineConfig({
    transpileDependencies: true,
    css: {
        loaderOptions: {
            scss: {
                sassOptions: {
                    content: \"~@/assets/styles/base/_colors.scss;\"
                }
            }
        }
    }
});

但是 scss 没有加载（看截图）。我正在使用 Vue3，sass@1.32.7，sass-loader@12.0.0

附言使用 node-sass 它工作正常

cli.vuejs.org/guide/…
使用 additionalData 不会进行更改

标签： vue.js sass prepend dart-sass

【解决方案1】：

如果有任何帮助，我会在我的 webpack 配置中使用 node-sass 进行此操作：

  {
    test: /\.scss$/,
    use: [
      env.production ? MiniCssExtractPlugin.loader : 'vue-style-loader',
      {
        loader: 'css-loader',
        options: {
          url: false,
        }
      },
      {
        loader: 'sass-loader',
        options: {
          additionalData:`
          @import "css/base/colors.scss";
          @import "css/settings.scss";
          @import "css/font-definitions";
          `
        },
      },
    ],
  },

有了它，我可以使用 vue 文件中附加数据中的文件定义的任何变量。

【讨论】：

【解决方案2】：

我的 vue.config.js ：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "./src/style/global.scss";`,
      },
    },
  },
};

对我来说很好

【讨论】：

你的 sass-loader 版本是什么？你使用 dart-sass（不是 node-sass）吗？
我正在使用 sass@1.49.9 和 sass-loader@12.6.0
我不知道为什么，但我注意到如果我在不重新运行服务器的情况下更改变量，我会遇到同样的错误，你是否尝试过在确保你的变量声明正确后重新运行你的前端服务器？
那是我第一次运行该项目并且我没有更改变量名 + 我重新运行了超过 20 次项目）

【解决方案3】：

Hello I'm using the next code, this appears in the documentation of VUE CLI [GotoDocumentationVueCLI][1]

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      // @/ is an alias to src/
      // so this assumes you have a file named `src/variables.sass`
      // Note: this option is named as "prependData" in sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      // by default the `sass` option will apply to both syntaxes
      // because `scss` syntax is also processed by sass-loader underlyingly
      // but when configuring the `prependData` option
      // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
      // in that case, we can target the `scss` syntax separately using the `scss` option
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // pass Less.js Options to less-loader
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

【讨论】：