首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

安装不带postcss的react-scripts

基础概念

react-scripts 是 Create React App 的一部分,它提供了一组脚本和配置,用于快速启动和运行 React 应用程序。默认情况下,react-scripts 会使用 PostCSS 来处理 CSS 文件,以便支持诸如自动前缀、CSS 模块等功能。

相关优势

  1. 简化配置react-scripts 自动处理 Webpack 配置,开发者无需手动配置。
  2. 快速启动:通过简单的命令即可启动开发服务器和构建生产版本。
  3. 内置工具:包括 ESLint、Babel 等,帮助开发者编写更高质量的代码。

类型

react-scripts 主要有以下几种类型:

  • react-scripts start:启动开发服务器。
  • react-scripts build:构建生产版本。
  • react-scripts test:运行测试。
  • react-scripts eject:暴露所有配置文件和依赖项。

应用场景

react-scripts 适用于快速开发和部署 React 应用程序,特别适合初学者和中小型项目。

安装不带 PostCSS 的 react-scripts

如果你不想使用 PostCSS,可以通过自定义 Webpack 配置来实现。以下是一个示例:

  1. 创建自定义 Webpack 配置文件
代码语言:txt
复制
mkdir config
touch config/webpack.config.js
  1. 编辑 webpack.config.js
代码语言:txt
复制
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'],
      },
    ],
  },
});
  1. 修改 package.json
代码语言:txt
复制
"scripts": {
  "start": "node config/webpack.config.js start",
  "build": "node config/webpack.config.js build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

可能遇到的问题及解决方法

  1. 找不到模块
代码语言:txt
复制
Module not found: Can't resolve 'react-scripts/config/webpack.config.js'

解决方法:确保你已经安装了 react-scripts,并且路径正确。

  1. CSS 处理问题
代码语言:txt
复制
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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何解决React官方脚手架不支持Less问题

如果您之前未曾使用过 create-react-app,请先通过如下命令全局安装(假定您本机已经安装了 Node.js): npm install -g create-react-app 然后,通过如下命令构建一个新项目...以上只是在项目中安装了 less 和 less-loader ,但还未曾通过 webpack 使用 less-loader。 至于怎么使用?几种使用方式?...因为脚手架为了实现“零配置”,会默认把一些通用脚本和配置集成到 react-scripts,目的是让我们专注于src目录下开发工作,不再操心环境配置。...项目构建完成后,会提供一个命令yarn eject,通过这个命令,我们可以把被 react-scripts 集成配置和脚本暴露出来。...至于 react-scripts 都集成了哪些东西,通过yarn eject命令执行记录也能看出个大概: λ yarn eject yarn run v1.6.0 $ react-scripts eject

1.9K30
  • 图片批量重命名编号不带括号_批量重命名不带括号

    如果你是一名摄影工作者,那么你电脑里肯定会保存很多图片,为了更好整理和保存这些图片,比如一类主题图片以相同文字命名并且编号,这样就方便以后查找了,解决办法有了,那么怎么给这么多图片命名并编号呢?...必须是重命名放大,这样可以一键修改文件名,但是这样修改后图片名称虽然有编号,但是编号外面加了一层括号,比较难看,很多小伙伴不想要这个括号,所以今天小编就为大家详细介绍“图片批量重命名编号不要括号”方法...”软件包,然后安装并打开软件,点击两个“添加文件”中任意一个,将需要重命名图片全部导入到软件中,可以导入不同文件夹中图片。...01”位数是2)。...步骤4,查看案例修改图片文件名可以看到,批量命名后图片名整齐规范有编号,并且没有括号。 将电脑中文件整理更有规范,有助于提高我们工作效率,对于工作性质涉及较多文件小伙伴来说更需要如此。

    1.4K10

    React目录结构详细解析

    ": "3.4.3" } 指定版本:比如1.2.2,遵循“大版本.次要版本.小版本”格式规定,安装时只安装指定版本。...(tilde)+指定版本:比如1.2.2,表示安装1.2.x最新版本(不低于1.2.2),但是不安装1.3.x,也就是说安装时不改变大版本号和次要版本号。...^号(caret)+指定版本:比如ˆ1.2.2,表示安装1.x.x最新版本(不低于1.2.2),但是不安装2.x.x,也就是说安装时不改变大版本号。...start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts...比如我们项目构建时候一般会用到babel,postCss等等,提供了对应浏览器信息后,他们就会针对浏览器信息采取不同编译策略。

    2.2K40

    使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem配置方法-vue-cli3.0

    在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件作用是 自动将vue项目中px转换为rem postcss-plugin-px2rem优势:   因为 postcss-plugin-px2rem...官方文档:https://www.npmjs.com/package/postcss-px2rem 安装插件(安装对应包) npm i postcss-plugin-px2rem --save -dev...所有的配置都放到了vue.config.js中(默认为空,如果没有这个文件自己写一个) module.exports = { //px转rem配置(postcss-plugin-px2rem...时vue.config.js配置 //方式一(♥): const px2rem = require('postcss-px2rem') const postcss = px2rem({ remUnit...document.documentElement.style.fontSize = realFont + 'px' } setRem() window.onresize = () => { setRem() } 安装

    2.2K40

    如何编写属于自己 PostCSS 8 插件?

    旧版本使用PostCSS 7,在升级至 PostCSS 8 过程中,笔者发现部分插件前置依赖还是停留在 7 版本,且年久失修,在 PostCSS 8 中出现各种各样问题,无奈只能研究源码,将目前部分旧版本插件升级至新版本...PostCSS 和插件工作原理其实很简单,就是先将 css 源码转换为 AST,插件基于转换后 AST 信息进行个性化处理,最后 PostCSS 再将处理后 AST 信息转换为 css 源码,完成...这里推荐一个简单而优雅 PostCSS 插件 postcss-focus,读者可以从这个插件源码中体会这个设计理念。 2....5 从低版本 PostCSS 迁移 升级你 PostCSS 插件具体可以参考官方给出升级指引。这里只对部分关键部分做下解释: 1....目前 PostCSS 8 还有大量还没进行升级兼容 PostCSS 插件,希望读者可以在阅读本文后可以获得启发,对 PostCSS 8 插件生态做出贡献。

    1K20

    创建不带BOM UTF8

    如果使用 StreamWriter 创建文本,都是默认带 BOM ,如果需要创建一个不带BOM文件,请看本文。 因为有很多个编码,打开一个文件,很难判断这个文件是什么编码。...需要知道,这个 BOM 是微软定义,所以在很多系统是没有 BOM ,所以保存了一个 xml 文件,可以在其他系统读取就出错了,他们不知道 BOM 。...下面就来提供一个简单方法创建不带 BOM 文件。因为和编码有关系,所以只需要替换 StreamWriter 编码就会好了,下面提供两个方法创建编码。...UTF8 代码,代码可以直接运行,当然需要修改文件为自己文件。...static void Main(string[] args) { var file = new FileInfo("E:\\博客\\创建不带BOM UTF8.

    1.8K10

    3(文件IO,不带缓冲IO)

    Oflag可用来说明此函数多个选项。...下面的常量是可选 O_APPEND 每次写时都追加到文件尾端 O_CREAT 若此文件不存在则创建它,使用此项时需要第三个参数mode O_EXCL 可以测试文件是否存在,若不存在则创建...,而dup2()可以通过filedes2来指定新描述符 复制一个描述符另一种方法是fcntl函数 dup2(filedes, filedes2);等效于dup(filedes); fcntl(filedes...延迟写减少了磁盘读写,却降低了文件内容更新速度次数,使得欲写到文件中数据在一段时间内没写到磁盘上,如果系统发生故障,可能造成文件丢失 #include int fsync(int...,排入写队列,但是不等待写完成即返回;fsync只对文件描述符filedes指定单一文件起作用,并且等待写磁盘操作结束;fdatasync类似于fsync,但它只影响文件数据部分,fsync还会同步更新文件属性

    95130

    零基础理解 PostCSS 主流程

    文章会介绍 PostCSS 主功能实现原理,不是介绍 api,也不会介绍所有功能原理,如果有需要了解全部功能或者查阅 API,可查看官方文档:https://postcss.org/api/。...什么是 PostCSS 官网说:“PostCSS,一个使用 JavaScript 来处理CSS框架”。这句话高度概括了 PostCSS 作用,但是太抽象了。...PostCSS 会在这个阶段,重新扫描 AST,执行注册监听器函数。 generate: 插件对 AST 处理后,PostCSS 把处理过 AST 对象转成 CSS string。...五个类之间继承关系如下图所示: 图中没有穷举类方法,好奇同学可以看直接看源码文件: https://github.com/postcss/postcss/tree/main/lib 。...基于 postcss 插件有很多,可查阅:https://github.com/postcss/postcss/blob/main/docs/plugins.md。

    70020

    编写 if 时不带 else,你代码会更好!

    设计更好软件,替换 If-Else 5 种方法。入门到高级示例 让我直接说这句话:If-Else 通常是一个糟糕选择。 它导致设计复杂,代码可读性差,并且可能导致重构困难。...但是,If-Else 已成为事实上代码分支解决方案,这确实是有道理。这是向所有有抱负开发人员讲授第一件事。不幸是,许多开发人员从来没有前进到更合适分支策略。...有些人口头禅是:If-Else 是一把锤子,一切都是钉子。 无法区分何时使用更合适方法是区分大三学生和大三学生原因之一。 我将向您展示一些技巧和模式,这些技巧和模式将终结这种可怕做法。...重构这个混乱过程过程如下: 使用公共接口将每个分支提取到单独策略类中 动态查找实现通用接口所有类 根据输入决定执行哪种策略 替换上面示例代码如下所示。是的,这是更多代码方式。...方法签名保持不变,因为调用者不需要了解我们重构。 首先,获取实现通用接口 IOrderOutputStrategy 程序集中所有类型。

    93660

    一种不带CPUDPU架构:Hyperion

    但随着定制化芯片不断发展,是否真的需要CPU逐渐成为一种值得考虑问题。尤其在定制计算领域,CPU计算能耗比过高已经成为事实,甚至有几个数量级差别。...如本公众号之前曾发布唤醒芯片介绍"小爱同学"之类语音唤醒芯片相关技术介绍,都是不带CPU超低功耗芯片。那么,在常常以功耗过大被诟病数据中心应用日益频繁DPU芯片,是否也可以不带CPU呢?...2017年图灵奖得主,体系结构宗师Hennessy和Patterson在2017年Turning Award演讲中宣布,在广泛主流计算中使用特定领域计算设备预示着计算机体系结构黄金时代来临[...针对任何工作负载CPU通用性和过度工程设计也导致了较差片上资源利用率[52],未使用硅[51,63],以及更高安全风险[81]。...与此同时,随着开源EDA流程和项目的出现[7,8],探索工作负载专用硬件设计(带或不带CPU)变得更容易实现和负担得起。

    1.2K30

    系统安装||第三篇:U盘pe模式安装纯净系统,不带任何捆绑和劫持!

    背景 昨天写是U盘安装纯净系统,不过安装只是单版本镜像文件写入是单版本或者多版本模式镜像文件,今天要写也是U盘安装系统,不过今天要分享是pe启动安装系统,任何版本镜像文件都可以安装【注意:...注意:对于安装系统是预装正版,没有用U盘安装过系统预装正版系统,请不要使用此方式进行电脑重装,请使用电脑自带系统重装进行安装,否则安装以后系统正常开启不会自动联网激活。...工具 微PE工具箱【诸如此类软件都可以】 软件简介: 跨时代PE工具箱,装机维护最得力助手,最后救命稻草。化繁为简,小材大用,一键安装,极速启动。 ? 软件特色 一键安装,急速启动!...之后打开软件,然后选择安装PE到U盘。 ? 然后选择安装方案,这里尽量选择方案一即可。然后选择需要制作U盘和格式,之后点击立即装入U盘即可。...等待写入完成,最后将所需要安装系统镜像文件拷入U盘即可。 ?

    2.6K10

    编写 if 时不带 else,你代码会更好!

    设计更好软件,替换If-Else5种方法。入门到高级示例 让我直接说这句话:If-Else通常是一个糟糕选择。 它导致设计复杂,代码可读性差,并且可能导致重构困难。...但是,If-Else已成为事实上代码分支解决方案,这确实是有道理。这是向所有有抱负开发人员讲授第一件事。不幸是,许多开发人员从来没有前进到更合适分支策略。...有些人口头禅是:If-Else是一把锤子,一切都是钉子。 无法区分何时使用更合适方法是区分大三学生和大三学生原因之一。 我将向您展示一些技巧和模式,这些技巧和模式将终结这种可怕做法。...重构这个混乱过程过程如下: 使用公共接口将每个分支提取到单独策略类中 动态查找实现通用接口所有类 根据输入决定执行哪种策略 替换上面示例代码如下所示。是的,这是更多代码方式。...方法签名保持不变,因为调用者不需要了解我们重构。 首先,获取实现通用接口IOrderOutputStrategy程序集中所有类型。

    66820

    Vue 项目之 Webpack 中 PostCSS 工具使用(1)

    webpack 时,其实不只包含它核心代码,还包括它生态,比如说它 loader,那么这里就有一个 postcss-loader,这个 loader 又需要依赖 PostCSS 这个工具,而这个工具在真正起作用时又依赖它里面安装插件...这个 PostCSS 工具本身也是一个独立工具,它就像 webpack 一样,里面也可以安装很多 plugins,不同 plugin 就有不同作用。...先来安装它们: npm install postcss postcss-cli -D 复制代码 然后,我们还需要去安装 PostCSS 对应一些插件,因为 PostCSS 只有依赖插件才会生效。...比如,我们想要通过 PostCSS 某个插件给某些属性添加浏览器前缀,那我们就可以安装 autoprefixer 这个 PostCSS 插件,这个插件可以帮助我们自动给 CSS 属性添加浏览器前缀:...上面的命令表示:使用局部安装 PostCSS 并使用 autoprefixer 插件对当前目录下 test.css 文件进行转换,转换结果输出到当前目录下 demo.css 文件中。

    1K00
    领券