在 Vue 中仅在特定组件中使用 scss，而不是在其他组件中使用 scss

Question

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

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

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

Answer 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，因为默认情况下每个模板都是独立的。

Answer 2

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