时间戳

首页 > 解决方案 > 如何在 Vue.JS 中添加将编译的全局 scss 文件？

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

问题描述

我正在尝试在我的 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>

标签： javascriptvue.jsvuejs2

解决方案

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

  1. 创建一个名为的文件（如果在您创建项目时vue.config.js它不是自动创建的）vue-cli
  2. 将这些代码添加到您创建的文件中
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/assets/scss/main.scss";
        `
      }
    }
  }
};
  1. @方法dir这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";
  `
}

推荐阅读