在 Vue CLI 3 中包含“normalize-scss”

Posted 2023-02-23

【中文标题】在 Vue CLI 3 中包含“normalize-scss”

【英文标题】：Include 'normalize-scss' in Vue CLI 3

【发布时间】：2019-01-19 06:38:03

【问题描述】：

刚刚将包 normalize-scss 添加到我的新 Vue 项目中，但没有应用任何样式...我都尝试了：

@import 'normalize-scss' 在我的styles.scss 中

import 'normalize-scss' 在我的main.js 页面中

我做错了吗？该包显然在那里，因为应用程序运行，但它实际上并没有应用任何 css 规则。

【问题讨论】：

好像没有那么简单：github.com/JohnAlbin/normalize-scss#how-to-use-it

【参考方案1】：

不确定这是否是正确的方法，但是，如果您使用 vue-templates，也许您可​​以尝试导入样式：

<style lang="scss">
  @import 'src/assets/css/mycss_lib.css';
</style>

另外请记住，不要在样式标签中使用scoped。您还需要 scss loader 和 node-sass 来完成这项工作。

【讨论】：

这适用于我手动添加的样式表，但不适用于这个包。

【参考方案2】：

我想通了。导入后，您需要将 normalize() 放入 main.scss 文件中。所以：

@import 'normalize-scss';
@include normalize();

【参考方案3】：

使用 npm 安装后，将其导入 main.js 文件的顶部：

import "normalize.css"

【讨论】：

就我而言，我不得不使用import "~normalize.css"

【参考方案4】：

如果您已经使用了主/全局 scss 文件：

将 normalize.css（其中任何一个）添加到您的项目中：yarn add normalize.css（或 npm） 在你的 main.scss 例如：@import '~normalize.css';

注意 ~ 的歧义，因为 cli 文档说：https://cli.vuejs.org/guide/css.html#referencing-assets