仅在特定组件而不是其他组件中使用 vue 中的 scss

Posted 2023-02-23

【中文标题】仅在特定组件而不是其他组件中使用 vue 中的 scss

【英文标题】：using scss in vue only in a specific component not others

【发布时间】：2020-05-19 11:18:45

【问题描述】：

我正在做一个 vue 项目， 在例如 /app 的路线上有不使用 scss 的组件。 在另一条路线上，例如 /admin 有使用 scss 的组件。 当我在项目中导入 /app 路由及其子路由时，它会产生如下错误：

font-size: $font-size-base;
            ^
      Undefined variable: "$font-size-base".

当我从路由器文件中删除 /app 及其子路由时，错误将得到解决并且工作正常。 我在 /admin 父组件中导入了 scss 以仅在此路由中使用 scss，但它没有解决错误。 有什么想法吗？

【参考方案1】：

Webpack 需要在项目运行时处理 SCSS。您会在路由上看到这一点，因为在被路由或父组件调用之前，它们不会在 Vue 中呈现。

Vue 可以同时使用常规 CSS 和 SASS。你必须设置它来处理文件。

我假设您在每个模板文件中都有 CSS 或 SCSS

<template> ... </template>
<script> ... </script>
<style> CSS or SCSS rules </style>

在这种情况下，您需要告诉 Vue 预处理样式标签中的内容。在您拥有 SCSS 的模板中使用 lang 属性执行此操作。

<style lang="SCSS"> ... </style>

您还需要包含node-sass 和sass-loader 包。

---

注意：您需要在使用它的组件中定义 SCSS 变量$font-size-base，因为默认情况下每个模板都是自包含的。

【讨论】：

感谢您的回答。当我不使用不使用 scss 的组件时，scss 工作正常。所以这意味着 node-sass 和 sass-loader 运行良好。但是当我在项目中导入我唯一的 CSS 样式组件时，它会导致这些错误。

调用SCSS变量的组件真的在同一个组件中有定义吗？

是的，我查过了。所有变量都已定义并具有值。

但它们是在使用该值的 SAME 组件中定义的？定义 AND 使用变量的组件是否有 lang="scss"？

不，它们是在 variables.scss 文件中定义的。所有 scss 样式组件都有 lang="scss"。

【参考方案2】：

我正在使用 require 来处理我的一个组件中的图像文件。这就是问题所在。