Fatal编程技术网
  • css/
  • Css 使用sass加载程序赢得'；t在React中动态导入类

Css 使用sass加载程序赢得'；t在React中动态导入类

css reactjs import sass

Css 使用sass加载程序赢得'；t在React中动态导入类,css,reactjs,import,sass,Css,Reactjs,Import,Sass,我的目标是使用动态类导入scss类 我似乎有一些用法，比如在，并希望在我的项目中做一些类似的事情 // App.js import classes from './App.scss' ... <div className={classes.App}/> 问题是那些css更改不会发生，使用dev工具我可以看到没有一个类是HTML的一部分 更改className='App'，将起作用 我已经使用命令npm install node sass-S执行SCSS安装过程 我发现一个名为

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

我似乎有一些用法，比如在，并希望在我的项目中做一些类似的事情


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




    

  • 问题是那些
    css
    更改不会发生，使用
    dev工具
    我可以看到没有一个类是HTML的一部分
    • 

  • 更改
    className='App'
    ，将起作用
    • 

  • 我已经使用命令
    npm install node sass-S
    执行
    SCSS
    安装过程
    • 


我发现一个名为的模块可以处理请求，但在完成了指南中的步骤后，它仍然无法工作。
这种结构称为CSS模块。如果使用
create react app
，请应用以下步骤

1） 首先安装
节点sass
模块


npm install node-sass


2） 使用扩展名
.module.SCSS
保存您的
SCSS
文件。例如：


App.module.scss


3） 按如下方式导入此文件：


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



<div className={classes.App}>


4） 现在，您可以像这样应用样式：


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



<div className={classes.App}>





成功了，谢谢！但是，是否有任何方法可以在不更改
scss
文件扩展名的情况下解决此问题？在项目
Ambar
（上面的链接）中，他们似乎只是用一个简单的
.scss
扩展名调用了他们的
scss
文件。据我所知，您必须添加
.module.scss
扩展名。这就是
CSS模块的工作原理@YanivGKI认为这与
webpack.config.js
设置有关。有一个与
css扩展相关的正则表达式
，在
sass加载器的文档中提到了它。因为我使用的是
react脚本
来管理设置，而不是
webpack
，所以我决定使用
module.scss
解决方案。所以我会解决这个问题-再次感谢。