如何在 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: {
        additionalData: `
          @import "@/assets/scss/main.scss";
        `
      }
    }
  }
};

1. @ 表示src 目录这意味着@/assets 与src/assets 相同
2. 我假设你有 main.scss 文件，如果你想知道它是如何制作的，你可以在其中包含所有子 scss 文件，看看 here 使用它真的很酷
3. 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)
  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";
  `
}

Answer 2

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

<style lang="scss">

@import "scss/main.scss";

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

Answer 3

更新 SASS-LOADER ^11.0.1

对于vue.config.js，如果您使用的是node-sass，则需要添加以下配置：

module.exports = {
  ...

  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/assets/styles/file.scss";',
        implementation: require('node-sass')
      },
    },
  },

  ...
};

Answer 4

SASS-LOADER ^9.0.0 更新

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

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

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

Answer 5

对于这种情况有一些解决方案。

1. 将全局 CSS 导入 index.html。
2. 将您的 css 文件导入到当前组件。
3. 假设您正在使用带有nuxt 的服务器端渲染，那么您可以将您的css 放在nuxt.config.js 文件中。
4. 你可以使用webpack

Answer 6

这取决于您用于创建 Vue 项目的内容，但是当您使用 Vue CLI 3 工具时，您可以在位于根目录的 vue.config.js 文件中进行设置。此文件用于配置您的 Vue 项目，并经常用于覆盖您的 webpack 配置（除非您弹出，否则该配置不存在）。

npm install -D sass-loader node-sass

之后，您可以将其添加到您的 vue.config.js 文件中

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

然后您可以将所有 scss 文件导入您的 main.scss。这样，您还可以在组件中使用变量。就个人而言，我不建议使用单独的样式表。如果您的项目规模扩大，您可能会删除组件，然后以您不再使用的样式结束。如果您在组件本身中编写 scss，则在删除组件时也会删除样式。我只会在一个单独的文件和一个变量文件中选择一些全局样式。希望这会有所帮助。