我希望我的React.js应用程序中的类可以从.styl-files中导出,就像从CSS模块中导出时一样,但是我找不到任何现成的解决方案来解决这个问题。
.styl
我找到了在使用Create React App创建的应用程序中设置CSS模块的指南。 我了解您需要运行npm run eject并以某种方式重写配置文件, 但是如何-我不明白。
npm run eject
您需要在项目中安装下一个npm-packages:
在webpack.config的部分中,module您需要添加以下几点:
module
{ test: /\.styl$/, use: [ 'style-loader', 'css-loader?modules&camelCase&localIdentName=[path]__[name]__[local]--[hash:base64:5]', 'stylus-loader', ], }, { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], },
然后您可以从React组件中的.styl文件导入样式,如下所示:
import style from './СomponentStyle.styl';
并且可以通过CSS名称使用样式,例如:
className={style.container}
其中container-它是CSS的名称,但不带点。对于复杂的名称,例如:.container-btn- green您需要编写下一个代码:style.containerBtnGreen或style['container-btn-green']
container
.container-btn- green
style.containerBtnGreen
style['container-btn-green']