react-scripts
是 Create React App 的一部分,它提供了一组脚本和配置,用于快速启动和运行 React 应用程序。默认情况下,react-scripts
会使用 PostCSS 来处理 CSS 文件,以便支持诸如自动前缀、CSS 模块等功能。
react-scripts
自动处理 Webpack 配置,开发者无需手动配置。react-scripts
主要有以下几种类型:
react-scripts start
:启动开发服务器。react-scripts build
:构建生产版本。react-scripts test
:运行测试。react-scripts eject
:暴露所有配置文件和依赖项。react-scripts
适用于快速开发和部署 React 应用程序,特别适合初学者和中小型项目。
react-scripts
如果你不想使用 PostCSS,可以通过自定义 Webpack 配置来实现。以下是一个示例:
mkdir config
touch config/webpack.config.js
webpack.config.js
:const { merge } = require('webpack-merge');
const commonConfig = require('react-scripts/config/webpack.config.js');
module.exports = merge(commonConfig, {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
});
package.json
:"scripts": {
"start": "node config/webpack.config.js start",
"build": "node config/webpack.config.js build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Module not found: Can't resolve 'react-scripts/config/webpack.config.js'
解决方法:确保你已经安装了 react-scripts
,并且路径正确。
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
解决方法:确保你的 Webpack 配置文件中正确配置了 CSS 处理规则。
通过以上步骤,你可以成功安装并运行不带 PostCSS 的 react-scripts
。
领取专属 10元无门槛券
手把手带您无忧上云