Question

正如您所看到的，我为整个项目加载了一个scss文件，我想知道是否可以通过单击按钮来更改加载的scss文件。请记住，这个scss文件适用于根组件，但我要将按钮放在一个组件上，就是它的祖母。

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

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

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

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

我不明白为什么要求不能在ifs内被隔离即使我这样做：

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

需要在构建时编译SCSS。浏览器无法处理SASS。在adition中，require（）方法是在构建时运行的webpack方法，而不是在浏览器中动态运行。你可以做的是使用像extract-css-chunks plugin

这样的东西用webpack创建分裂

Answer 2

您可以查看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');
         }
    }
}

单击按钮动态加载SCSS文件

2 个答案: