如何在将编译的 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>

原文由 Al-76 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

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

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

如果您使用的是 .sass 文件，请使用这些配置

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

原文由 Ntwari Clarance Liberiste 发布，翻译遵循 CC BY-SA 4.0 许可协议