[英]How to configure Stylus support in a React.js application?
I want the classes in my React.js application to be available for export from .styl
-files in the same way as it can be done from CSS Modules, but I can't find any ready-made solution to this problem.我希望我的 React.js 应用程序中的类可以从.styl
文件导出,就像从 CSS 模块导出一样,但我找不到任何现成的解决方案来解决这个问题。
I found a guide to setting up CSS Modules in an application created with Create React App.我找到了在使用 Create React App 创建的应用程序中设置 CSS 模块的指南。
I understand that you need to run npm run eject
and somehow rewrite configuration files,我知道您需要运行npm run eject
并以某种方式重写配置文件,
but how – I don't understand.但是怎么——我不明白。
You need to install next npm-packages in your project:你需要在你的项目中安装下一个 npm-packages:
In webpack.config, in section module
you need to add next points:在 webpack.config 中,在 section 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',
],
},
Then you can import your styles from .styl files in your React components like this:然后你可以从 React 组件中的 .styl 文件导入你的样式,如下所示:
import style from './СomponentStyle.styl';
and you can use style by CSS name for example:您可以通过 CSS 名称使用样式,例如:
className={style.container}
where container
- it is name of CSS but without dot.其中container
- 它是 CSS 的名称,但没有点。 For complicated names like: .container-btn-green
you need write next code: style.containerBtnGreen
or style['container-btn-green']
对于像: .container-btn-green
这样的复杂名称,您需要编写下一个代码: style.containerBtnGreen
或style['container-btn-green']
Run-time solution ( without eject )运行时解决方案(无弹出)
install react-rewired and customize-cra to have an option to update config on run-time安装 react-rewired 和 custom-cra 可以选择在运行时更新配置
npm i react-app-rewired
npm i customize-cra
create file config-overrides.js in the package.json folder with content :在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',
]
})
);
install stylus安装手写笔
npm i stylus
npm i stylus-loader
npm i css-loader
change your start / build scripts to use react-rewired更改您的启动/构建脚本以使用 react-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
...
Then you can import your styles from .styl files in your React components然后你可以从 React 组件中的 .styl 文件导入你的样式
require('./style/index.styl');
OR或者
import style from './СomponentStyle.styl'; --> className={style.container}
This all :) Additional thanks to Denis Bubnov in current topic - you helped me much to implement current solution!这一切 :) 另外感谢Denis Bubnov在当前主题中 - 您对我实施当前解决方案帮助很大!
Here is the link to configure stylus with create react app这是使用 create react app 配置手写笔的链接
https://github.com/flexzuu/create-react-app-styl https://github.com/flexzuu/create-react-app-styl
I like Surya's approach.我喜欢 Surya 的方法。
npm install stylus --save-dev
/src/styl
and /src/css
创建 2 个文件夹/src/styl
和/src/css
/src/styl
.将一些文件放入/src/styl
。package.json
:将以下脚本添加到您的package.json
: "stylus:watch": "stylus -I ./node_modules -w ./src/styl -o ./src/css",
"stylus": "stylus -I ./node_modules ./src/styl -o ./src/css"
npm run stylus:watch
in a second terminal.在第二个终端运行npm run stylus:watch
。 It will watch all files in /src/styl
and compile them to css in /src/css
where they will be picked up by your React dev server.它将监视/src/styl
中的所有文件,并将它们编译为/src/css
中的 css,它们将被你的 React 开发服务器获取。npm run stylus
one last time.在构建你的 React 应用程序之前,请确保最后一次运行npm run stylus
one。 npm install stylus -g
Mac/Ubuntu:苹果机/Ubuntu:
"scripts": {
"build:stylus": "find . -name *.styl -exec stylus {} --out ./build/static/css ;",
"build": "react-scripts build && npm run build:stylus",
}
Windows: Windows:
"scripts": {
"build:stylus": "for /r %v in (*.styl) do stylus %v --out ./build/static/css",
"build": "react-scripts build && npm run build:stylus",
}
In the scripts above we are calling the stylus command described below:在上面的脚本中,我们调用了如下所述的手写笔命令:
stylus <path-to-input-file.styl> --out <path-to-output-file\>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.