我希望我的 React.js 应用程序中的类可以从.styl-files导出，就像从 CSS Modules导出一样，但是我找不到任何现成的解决方案来解决这个问题。
我找到了在使用 Create React App 创建的应用程序中设置 CSS module的指南。
我知道您需要运行npm run eject并以某种方式重写配置文件，
但是如何 - 我不明白。
如何在 React.js 应用程序中配置 Stylus 支持？
IT技术
javascript
reactjs
webpack
create-react-app
stylus
2021-04-15 05:22:48
3个回答
你需要在你的项目中安装下一个 npm-packages：
在 webpack.config 中，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}
where container- 它是 CSS 的名称，但没有点。对于复杂的名称，例如：.container-btn-green您需要编写下一个代码：style.containerBtnGreen或style['container-btn-green']
运行时解决方案（无弹出）
安装 react-rewired 和 custom-cra 可以选择在运行时更新配置
npm i react-app-rewired
npm i customize-cra
在package.json文件夹中创建文件config-overrides.js，内容为：
const {
override,
addWebpackModuleRule
} = require("customize-cra");
module.exports = override(
addWebpackModuleRule({
test: /\.styl$/,
exclude: /(node_modules)/,
loaders: [
'style-loader',
{
loader: 'css-loader',
options: {url: false}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [require('autoprefixer')()]
}
},
'stylus-loader'
]
}),
addWebpackModuleRule({
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
})
);
安装手写笔
npm i stylus
npm i stylus-loader
npm i css-loader
更改您的启动/构建脚本以使用 react-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
...
然后你可以从 React 组件中的 .styl 文件导入你的样式
require('./style/index.styl');
或者
import style from './СomponentStyle.styl'; --> className={style.container}
这一切 :) 另外感谢Denis Bubnov在当前主题中 - 您对我实施当前解决方案帮助很大！
这是使用 create react app 配置手写笔的链接
其它你可能感兴趣的问题