reactjs - React 组件库 - 让手写笔工作

Question

我正在使用这个库 https://github.com/facebook/create-react-app

我正在尝试让手写笔工作

到目前为止我所做的是

npm install --save-dev stylus

和

npm install --save-dev stylus-loader

然后添加到package.json中，

"build-css": "stylus src/ -o src/",
"watch-css": "npm run build-css && stylus src/ -o src/ --watch --recursive",

如库文档中所述

此库中没有显式的 webpack 文件

Answer 1

我遇到了同样的问题，我找到了这个解决方案，您可以在下面的链接上查看该解决方案，但也在这里转录以供引用:

解决方案1

How to use Stylus with Create React App

首先，您需要安装 Stylus(如果尚未安装):

npm install stylus -g

接下来，您需要创建新的 React 应用程序:

create-react-app my_app
cd my_app
mkdir src/static/stylus

现在您需要安装 npm-run-all 软件包:

npm install --save-dev npm-run-all

最后一步，您必须从 package.json 中删除构建和启动脚本，并将其替换为以下内容:

"build-css": "stylus -c src/static/stylus/ --out src/static/css",
"watch-css": "npm run build-css && stylus -c -w src/static/stylus/ --out src/static/css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js"

现在您可以正常运行您的应用程序了

npm start

并在每次应用重新加载时编译所有手写笔脚本。

解决方案2

我没有尝试过这个，但也许它也值得检查:

create-react-app-stylus

基本安装 npm 模块:

npm install create-react-app-stylus --save-dev

然后替换 package.json 中的启动和构建脚本。

"scripts": {
  "start": "react-scripts-with-stylus start path/to/main.styl",
  "build": "react-scripts-with-stylus build path/to/main.styl",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

结论:

我让它工作得很好，现在我只是想找到一种方法让它在每个组件的文件夹中工作。