单击按钮时动态加载 SCSS 文件

Question

如您所见，我为整个项目加载了一个 scss 文件，我想知道是否可以更改单击按钮时加载的 scss 文件。请记住，此 scss 文件适用于根组件，但我要将按钮放在它的孙组件上。

我已经尝试了一些事情，但问题显然是除了通过导入（这是在 /Components/App.jsx 中）之外，没有其他方法可以对 scss 文件进行属性：

import '../scss/app.scss';
//import '../scss/darcula.scss'; for dark theme.

如果我取消注释上述导入的 scss 是 darcula，但我无法动态更改我知道的导入集。

一个可接受的解决方案是在子文件中触发的单独导入，它不会完全替换其他文件，而是仅取代每个重新定义的样式，允许我只更改颜色以获得我想要的这个“夜间模式”按钮。

我不明白为什么不能在 ifs 中隔离 requires 即使我这样做：

turnLightsOnOff() {
    if (this.state.theme) {
        require('../../../scss/app.scss');
        this.setState({
            theme: false,
        });
    } else {
        //require('../../../scss/darcula.scss');
        this.setState({
            theme: true,
        });
    }
}

即使尚未满足 if 的条件，app.css 也已加载

如果我取消注释另一行，则两个 scss 都会一个接一个地加载。

Answer 1

SCSS 需要在构建时进行编译。浏览器没有处理SASS的能力。另外， require() 方法是一个在构建时运行的 webpack 方法，而不是在浏览器中动态运行。你可以做的是使用诸如extract-css-chunks 插件之类的 webpack 创建分割