Question

我有一个站点，其中包含三个底层应用程序，这些应用程序使用许多相同的组件，但是在每个应用程序中其样式略有不同。

所以我制作了一个使用Webpack中的sass loader导入的网站样式

我的路径

const csspath = path.resolve(__dirname,  './src/styles/main.scss');

我的装载机

{
   loader: 'sass-loader',
   options: {
    sourceMap: true
   }
},
{
    loader: 'sass-resources-loader',
    options: {
      resources: [csspath]
    }
}

在我的一个sass文件中，我有以下

$navBackground: $black;
$navForeground: $white;
$itemSize: 60px;

.NavHeader {
    position: sticky;
    top: 0;
    z-index: 1071;
    background-color: $navBackground;
    color: $navForeground;
    width: 100vw;
    height: $itemSize;
}

我也有一些导入到组件内部的CSS，就像这样

import './Header.style.scss';

如果我将这些变量放入标题样式

$navBackground: $black;
$navForeground: $white;

它可以正常编译，但是如果我从全局sass文件中删除这些变量，并将变量保留在本地Header.style.scss中，则会收到错误消息

模块构建失败（来自./node_modules/sass-loader/lib/loader.js）：

background-color: $navBackground;
                 ^
  Undefined variable: "$navBackground".
  in /Users/bryanrasmussen/projects/dc_frontend/src/styles/components/_header.scss (line 8, column 23)

我想很明显的问题是，组件中的本地sass文件是由sass-loaders加载器加载的，而全局且未绑定到组件的资源是由sass-resources-loader加载的，因此这些加载器彼此一无所知。所以问题是，是否可以通过某种方式合并它们，或者无论如何sass-resources-loader都可以知道由sass-loader加载的sass文件？

Answer 1

我找到了一个我不太喜欢的解决方案，尽管有点笨拙，但无论如何如果有人遇到相同的问题，我还是会把它放在这里。

在需要重用样式的组件中，例如我要做的标题

import './Header.style.scss';

在组件和Sass中，设置所需的变量并导入可重复使用的Sass

$

navBackground: $black;
$navForeground: $white;
$userColor: $white;
$navItemColor: $white;
$currentSelectedEmphasizeColor: $green;
$hamburgerCloserColor: $white;
$burgerMenuBackground: $black;
$navMenuLinkColor: $white;

@import '../../../styles/components/header';

我从主要加载的资源中删除了样式/组件/标题样式，所以我仍然有sass资源加载器，它提供了跨应用程序样式，但是需要在每个单独的应用程序中设置的任何东西都必须加载重用的组件样式并在本地设置变量，以便在编译时main.scss中不会发生任何错误。

使用Webpack加载程序时如何在本地sass文件中设置变量以覆盖常规sass中的设置

1 个答案: