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

Question

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

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

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,
        });
    }
}

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

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

Answer 1

您可以查看this question 了解有关主题管理的详细信息。我建议的是更简单的解决方案（在我看来）

而不是像这样分隔不同样式的文件；

/* main.css */
#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

/* theme1.css */
#box {
    backround-color: red;
}

/* theme2.css */
#box {
    background-color: maroon
}

像这样将它们设置在一个文件中；

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

div.theme1 #box {
    backround-color: red;
}

div.theme2 #box {
    background-color: maroon
}

我知道这是一个 css 解决方案而不是 scss，但逻辑几乎相同。

您可以在更高级别的组件上设置所需的主题 className 并影响整个应用程序。

class App extends React.Component {
    render() {
        return (
            <div className={this.props.theme}>
                <MainApp />
            </div>
        )
    }
}

更新

你可以根据this answer做条件要求。

class Main extends Component {
    componentWillMount() {
         if(this.props.language === 'ar') {
            require('arabic.css');
         } else {
            require('english.css');
         }
    }
}

Answer 2

SCSS 需要在构建时编译。浏览器不具备处理 SASS 的能力。此外，require() 方法是在构建时运行的 webpack 方法，而不是在浏览器中动态运行。你可以做的是使用类似extract-css-chunks plugin

的 webpack 创建拆分