使用sass-loader不会在React中动态导入类 [英] Using sass-loader won't import classes dynamically in React

问题描述

我的目标是使用动态类导入scss-classes.

My goal is to import scss-classes using dynamic classes.

我似乎有几种用法，例如

I've seem several usages such as in Ambar opensource, and wish to do something similar in my project.

// App.js
import classes from './App.scss'
...
<div className={classes.App}/>

// App.scss
.App {
  text-align: center;
}

• 问题是使用dev-tools不会发生那些css更改，我可以看到所有类都不是HTML的一部分.

  • The Problem is that those css changes won't occur, using dev-tools I can see that none of the classes are a part of the HTML.

    更改className='App'将起作用.

    我在SCSS安装过程中使用了命令npm install node-sass -S.

    I've used the command npm install node-sass -S for the SCSS installation process.

    我发现了名为 sass-loader 的模块，但是在完成他们的指南中的步骤后-仍然无法正常工作.

    I've found module called sass-loader that handle the request, but after completing the steps on their guide - it still won't work.

    推荐答案

    此结构称为 CSS模块.如果使用create-react-app，请执行以下步骤.

    This structure is called CSS Modules. If you use create-react-app, apply these steps.

    1)首先安装node-sass模块.

    npm install node-sass
    

    2)使用.module.scss 扩展名保存您的SCSS文件.例如:

    2) Save your SCSS file with .module.scss extension. For example:

    App.module.scss
    

    3)像这样导入该文件:

    3) Import this file like this:

    import classes from "./App.module.scss";
    

    4)现在，您可以应用如下样式:

    4) Now, you can apply your styles like this:

    <div className={classes.App}>
    

    这篇关于使用sass-loader不会在React中动态导入类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！