如何在将编译的 Vue.JS 中添加全局 scss 文件？

Question

我正在尝试在我的 VueJS 项目中导入一个 scss 文件，然后它将在其中进行编译，从而能够与我的项目一起使用。但是，我需要一些帮助，因为目前它只是错误。有没有办法做到这一点？请注意，我对 VueJS 很陌生，所以我只是在了解基础知识。

我在 src 文件夹中创建了一个名为 scss 的文件夹，其中包含我的 main.scss 文件。接下来在我的 Vue.JS 中，我有以下代码；

<template>
  <div id="app">
    <Home></Home>
    <Primary></Primary>
    <Secondary></Secondary>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'

export default {
  name: 'app',
  components: {
    'Home': Home,
    'Primary': Primary,
    'Secondary': Secondary
  }
}

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

</script>

<style lang="scss">
#app {
    display:block;
}
</style>

Answer 1

为了简单起见，只需使用这个技巧

1. 创建一个名为的文件vue.config.js（如果它不是vue-cli在您创建项目时自动创建的）
2. 将这些代码添加到您创建的文件中

module.exports = {
    css: {
      loaderOptions: {
        sass: {
            prependData: `
            @import "@/assets/scss/main.scss";
            `
        }
      }
    }
  };

3. 该@装置srcDIR这意味着，@/assets相同src/assets
4. 我假设你有这个main.scss文件，如果你想知道它是如何制作的，你可以在其中包含所有子 scss 文件，看看这里，使用 它真的很酷
5. prependData可能无法工作或抛出错误我使用这些的原因是因为我使用"sass-loader": "^8.0.2". 这里有一些有用的信息

• 在"sass-loader": "^7.*.*"尝试使用data
• 在"sass-loader": "^8.0.2"尝试使用prependData
• 在"sass-loader": "^9.0.0"尝试使用additionalData

6. 在那之后停止服务器并再次运行它以加载我们所做的新配置 vue.config.js
7. 如果您正在使用vuetify它可能会引发错误，因此请确保将处理器名称与扩展名匹配，就像如果您有.scss文件一样，您将需要使用这些配置

        scss: { //the change was made here (match the option name with file extension)
            prependData: `
            @import "@/assets/scss/main.scss";
            `
        }

如果您正在使用.sass文件，请使用这些配置

        sass: { //the change was made here (match the option name with file extension)
            prependData: `
            @import "@/assets/scss/main.sass";
            `
        }

Answer 2

SASS 加载程序 ^9.0.0 的更新

我正在使用 sass-loader 9.0.2 下面的 Vue.config.js 文件配置。一切正常。

注意：在最新版本的 SASS-LOADER 上使用 additionalData 代替 data 或 prependData。

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

Answer 3

我更新了样式标签以包含导入语句并且它有效：

<style lang="scss">

@import "scss/main.scss";

#app {
    display:block;
}
</style>