使用 Vue 3 将 SCSS 样式应用于全局 SCSS 文件中的正文元素答案

【问题标题】：Applying SCSS style to body element in global SCSS file using Vue 3使用 Vue 3 将 SCSS 样式应用于全局 SCSS 文件中的正文元素
【发布时间】：2021-09-08 19:38:52
【问题描述】：

我想在我创建的全局 SCSS 文件中使用 SCSS 设置我的 body 元素的样式。具体来说，我想从 body 元素中删除边距和填充，设置字体和平滑滚动。

我当前的结构：我有一个 main.scss 文件，它可以导入我需要的所有其他 .scss 文件（全局、颜色、mixins 等）。这个 main.scss 文件是通过在 vue.config.js 文件中导出来加载的：

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

这是我的 global.scss 文件：

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;1,300&display=swap');


// This doesn't get applied...
body {
    height: 100vh;
    min-height: 100%;
    width: 100%;

    margin: 0px !important;
    padding: 0px !important;

    scroll-behavior: smooth;

    font-family: 'Roboto', sans-serif;
}

我正在使用这些包来编译和加载 SCSS：

"sass": "^1.27.0",
"sass-loader": "^10.0.3"

我在不同的 Vue 2 项目中使用了几乎相同的结构和代码，并且它有效。 Vue 3 改变了什么？

我的 global.scss 文件中的样式是否仅应用于 Vue 应用容器内？

我知道一种解决方法是在我的 .html 文件中添加一个样式标记并将此 CSS 代码放入其中，但我想使用 SCSS。

【问题讨论】：

标签： javascript css sass vuejs3

【解决方案1】：

一个可行的解决方案是在 App.vue 组件（主组件）中导入 global.scss 文件。确保样式标签没有作用域。

所以把它放在你的 App.vue 中：

<style lang="scss">
    @import "@/assets/scss/global.scss";
</style>

【讨论】：

【解决方案2】：

我在一个小项目中遇到了同样的问题。我是 Vue 和 Sass 的新手，所以我不知道 Vue 2 和 Vue 3 之间的区别，但对我来说这个来源非常有帮助：https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling

您可以将 global.scss（或 main.scss？）导入 src/main.js 文件，而不是 reset.css 文件。它会以同样的方式工作。

【讨论】：

【解决方案3】：

尝试安装这个：https://www.npmjs.com/package/node-sass。也许，你使用了错误的包。

【讨论】：

【解决方案4】：

我也有同样的问题。在尝试了一堆“随机”解决方案之后，我注意到当我在 App.vue 中更改我的标签，删除“范围”属性时，事情开始起作用了。无法解释为什么，但它对我有用。如果我放回“范围”属性，“全局”scss 将再次不会将样式应用于主体元素。

【讨论】：