时间戳

首页 > 解决方案 > Sass @extend 在构建期间考虑导入的 css

css - Sass @extend 在构建期间考虑导入的 css

问题描述

我有一个包含所有通用 CSS 的全局 CSS 文件。

我希望能够在我的任何 SCSS 文件中扩展此全局 CSS 文件中存在的所有类。

现在它抛出一个错误 .xyz 类不存在并且构建失败。我尝试导入此文件，但仍然构建失败。

在类旁边添加 !options 是构建通过的一种方法，但还有其他更好的方法吗？

为 Vue 用户提供更多上下文。我使用 VueCli3。我<style lang="scss">用于编写 SCSS 并想在这里使用扩展。 Vue 文档建议添加 prependData 以添加变量。我在 SCSS 文件中导入了全局 CSS，并将该文件导入到 prependData 中，但 Vue 构建仍然失败。

标签： cssvue.jssassextendvue-cli-3

解决方案

听起来您想全局包含一个 CSS 文件，其中包含每个组件中的 SCSS 块可以读取的内容。（变量、样式定义等）。

@extend像变量一样工作，这意味着 SCSS 需要定义样式作为其编译的一部分。所以这意味着让“SCSS 全局变量”工作也应该解决您的扩展问题。

在这种情况下，您需要调整 Webpack 处理组件的方式。您可以按照此处所述手动执行此操作。或者我更喜欢使用名为vue-cli-plugin-sass-resources-loader的 Vue Cli 插件。确保您的组件<style>部分包含lang="SCSS"虽然我假设您已经这样做了。

推荐阅读