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

新的create-react-app无法编译sass

create-react-app 是一个用于快速创建React应用程序的脚手架工具,但是默认情况下,它并不支持编译Sass。

Sass(Syntactically Awesome Stylesheets)是一种CSS预处理器,它扩展了CSS,并提供了更多的功能和灵活性。为了在create-react-app中使用Sass,你需要进行一些配置。

下面是解决方案:

  1. 首先,确保你的项目中已经安装了node.js,并且npm或yarn已经可用。
  2. 在项目根目录下打开终端,并执行以下命令安装sass相关依赖:
代码语言:txt
复制
npm install node-sass --save-dev
  1. 安装完成后,打开package.json文件,找到"scripts"字段,并修改"start"和"build"命令如下:
代码语言:txt
复制
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build && node-sass src/ -o src/",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

这里通过在build命令中添加了"node-sass src/ -o src/"来编译Sass文件。这样,当你运行npm run build命令时,Sass文件将被编译到相应的CSS文件中。

  1. 现在,你可以在项目中创建一个新的Sass文件,然后在你的React组件中引入它。例如,假设你创建了一个名为"styles.scss"的Sass文件,你可以在组件中这样引入:
代码语言:txt
复制
import React from 'react';
import './styles.scss';

const MyComponent = () => {
  return (
    <div className="my-component">
      {/* Your component JSX */}
    </div>
  );
}

export default MyComponent;

注意,使用Sass时,class名称需要使用"className"属性来指定,因为在JSX中使用"class"会导致语法错误。

至此,你应该能够在create-react-app中成功编译Sass文件了。

推荐的腾讯云产品:无

总结: create-react-app 默认情况下不支持编译Sass,但通过安装node-sass并修改package.json的"build"命令,可以在create-react-app中编译Sass文件。

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

相关·内容

继往开来 sass 3 代编译器:ruby sass、node-sass、dart-sass

less、stylus 编译器都是 js 写,而 sass 就比较特殊了,3 代编译器都不是 js 写。 今天,我们就来聊下 sass 历史:sass 3 代编译器。...SASS 团队两个主要维护者感觉自己支持 CSS 特性速度跟不上了,而且社区出现了 dart-sass 这个对 css 特性支持更好 sass 编译器,随着时间推移,CSS 特性支持上差距越来越大...最终,在 2020 年 10 月份,node-sass 宣布了不再继续支持特性,标记为了过时,推荐使用 dart-sass。...尽管我们希望看到这种模式发生转变,但即使是长期 LibSass 贡献者 Michael Mifsud 和 Marcel Greter 出色工作也无法跟上CSS和 Sass语言开发快速步伐。...好处是对 css 特性支持更全,而且也没有和 node 版本绑定关系。 ruby sass 和 node-sass 都已经是历史,dart-sasssass 编译未来。

1.5K10

node-sass无法安装各种解决方案 原

使用react到现在,让人头疼一个问题是安装node-sass。其实导致问题根源在于安装过程需要下载一个binding.node文件,而因“你懂”原因,访问不了这个地址。...执行如下命令即可: npm install npm rm node-sass cnpm install node-sass npm install 但是我们在使用cnpm时也遇到了一个坑,在ubuntu14.04...下载后编译 实际上为了得到binding.node,是可以直接从github上把源码下载下来之后再编译出来,node-sass自己也会这样做,但是编译要依赖其他工具。...dropDown.scss”,然后在linux(是ubuntu 14.04其他发行版没时间去测试,windows没这毛病)上用webpack打包,打包过程没有任何异常,但是放到服务器上运行打开某个页面就抛出无法找到...我强烈怀疑是某个临时工在node-sass里写了什么“硬编码”对字符串进行判断,发现“/drop[*]”这样前缀进行一些特殊处理。在此记录下来。

1.9K20
  • create-react-app中使用sass

    而较语法叫做“SCSS”,使用和CSS一样块语法,即使用大括号将不同规则分开,使用分号将具体样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。...不管你是刚使用Reactjs或者是Reactjs老司机,你们一定都听说过create-react-app这个脚手架,而从create-react-app官方文档中,我们可以看到他们暂时还不支持直接导入...为了能一边编译sass,一边运行我们前端项目,我们还需要npm-run-all这个工具,这是一个并行运行多个npm脚本脚手架工具,安装方式也非常简单。...$ npm install npm-run-all --save-dev # or $ yarn add npm-run-all --dev 最后,在不使用ejec命令情况下,更改create-react-app...package.jsonscript内容,让sass一边编译,一边跑着我们前端项目,实现热更。

    2.9K20

    Gulp 工作流中Sass 增量编译功能探索

    大约是上一年这个时候,因为项目合并来到了项目组中。虽然协作同岗位同事也是同一个组,但使用Gulp 工作流却有些不一样。...第一天做项目需求时候,就遇到了一件让我瞠目结舌事情:这里Sass 编译一次居然要10s 以上。...初级玩家玩法 Gulp 工作流中集成Sass 编译一般都是用gulp-sass 这个模块,本质上gulp-sass 调用是node-sass(C++ 版Sass)。...熟悉Gulp 都知道,默认的话Sass 中都是全量编译,小项目玩家或初级玩家一般直接这么写: var gulp = require('gulp'); var sass = require('gulp-sass...解决方法也呼之欲出了,在cached() 与 sass() pipe 中间我们还需要一个步骤,即将传入改动文件找出其上下关系依赖文件,整体文件集传入到 sass() pipe 去执行编译

    1.4K60

    React脚手架安装

    最近在学习react分享一下脚手架安装: 进入指定文件夹 npm install create-react-app -g / yarn add create-react-app(先确认是否安装了node...和npm) create-react-app 项目名称 (ts:create-react-app 项目名称 --template typescript) 创建成功 安装插件 yarn add axios...:对于css预编译选择sass小伙伴需要注意,node-sass安装有网络问题和可能安装失败,推荐使用yarn(在node-sass 5.x版本得到解决但是node版本需要15或更高版本) image.png...对于现在市场上产品选对框架也非常重要在很多TOC产品开发中网站需要保证自身SEO可以考虑使用React第三方框架Next.js 目前React开发通常选择库为: TypeScript(必选)...组件库:通常使用antd design CSS方案:styled-components或者最近比较流行tailwind css预编译Scss居多 请求工具:axios或者封装fetch 状态管理:Redux

    65210

    TypeScript学习进程(一)

    学前端有一段时间了,对于Ts一直有尝试想法,now,try 首先放张图,这将是ts学习路径,现在的话是配置sass+ts环境 环境配置真滴累 默认完成了ruby、webpack、create-react-app...脚手架安装 create一个TypeScript+React应用 npx create-react-app my-app --template typescript 完成了这一步,你可以用VsCode...安装node-sass npm install --save node-sass@5.0.0 为啥是5.0.0呢......因为最新版本不兼容啊 修改App.css为App.scss App.tsx...TS编译过程 首先要知道,ts编译和c++这些语言编译是不一样过程 从图里可以看到,ts没有所谓编译失败,即便报错那也能生成js文件,ts编译目标是js代码。...TS类型系统 TS采用结构类型系统 这和名义类型系统区别在哪嘞? 主要体现就是,ts中类,只要结构相同,即便名字不同也算一个类型!

    48010

    基于create-react-app打包编译自己第三方UI组件库

    蓝色按钮就是我们tag组件,接下来我们把它发布到npm上,效果如下: ? 此时我们就可以用npm install方式安装我们组件并使用了。...实现 首先我是基于create-react-app来打包我们UI库,因为比较方便简单,当然我们也可以使用自己搭建webpack来实现这一过程。...1.通过create-react-app快速启动一个项目: npx create-react-app alex_xucd alex_xunpm start 2.设计组件库目录结构 我们在create-react-app...创建项目下src目录下新建components用来存放我们组件,用app.js要导入我们组件来测试效果,我们会把打包后组件目录放在lib下,目录大致如下: ?...[ "@babel/preset-env", // 将ES6语法转换为es5 { "useBuiltIns": "usage", // 只编译需要编译代码

    2.2K80

    React环境创建

    创建React项目 1、node 版本 查看node版本 一般会安装nvm来管理node 版本 2、npx create-react-app my-app 官方标准命令,my-app 为项目名称...(3)yarn add npm-run-all 修改package.json里 "scripts": { "build-css": "node-sass-chokidar src/ -o src...安装axios yarn add axios 引用配置文件时候要安装 yarn add http-proxy-middleware 9....在src目录下创建一个styles文件在styles里创建一个index.scss文件所有css样式都写下这里 修改入口文件 在src文件里有个index.js文件里 import '..../styles/index.css'; yarn start 添加scss 文件 启动成功并编译成功表示react项目创建成功 最后git push往仓库添加 每天早中晚都要push一下,以防电脑死机打不开等等一起其他问题

    9610

    编译ffmpeg无法生成ffplay问题解决

    编译ffmpeg无法生成ffplay问题解决 好多人问编译ffmpeg时无法生成ffplay,其具体原因多数是由于没有SDL或者SDL版本不正确所导致。.../configure --prefix=/usr make -j16 sudo make install 安装完成后,再次编译ffmpeg既可解决 原因分析...fi enabled sdl && add_cflags $sdl_cflags && add_extralibs $sdl_libs 这里比较关键,首先判断SDL.h中版本对应值在通过计算后是否在...0x010201至0x010300之间,如果是的话SDL版本才会正确被执行,否则这个测试项将会出现错误,生成config.log中有对应错误记录 当没有安装SDL库时,config.log中相关错误信息如下...SDL1和SDL2初步对比,发现SDL2与SDL1差别还是蛮大,要改libavdevice也是力气活,所以如果SDL1不影响太多的话,还是用SDL1吧

    2.3K20

    【原创】不想eject,还咋修改create-react-app配置?

    一、先抛问题 许多刚开始接触create-react-app框架同学,不免都会有个疑问:如何在不执行eject操作同时,修改create-react-app配置。...,同时scripts目录下会有命令文件更新,package.json文件中scripts命令同步更新。...其次,在版本迭代时,如果更新了react、react-scripts、eslint、tsconfig等依赖,有可能会引起版本依赖问题,即使我们按错误信息修复了之后,项目还是无法运行。...所以我们一般不太建议使用yarn eject方式暴露create-react-app框架配置。...中内置了sass/scss预处理器,只需要使用时安装相关依赖就可以了(运行时,根据提示缺失包进行安装即可)。

    2.9K40

    webpack4.0 CheatSheet

    压箱底笔记而已,大家看看乐乐就好了,这是笔者为了练习webpack而尝试了不同配置方式,参考了create-react-appwebpack配置。以及学习了如何自己写一个简易proxy。...,笔者认为它modules模块化是一个很实用功能,大爱 sass-loader 一个SASS处理器,先将scss编译成css,然后css再做进一步处理 node-sass 编译scss依赖包...,然后url加载 希望可以压缩一下 想要自动加前缀功能 使用SCSS等,高级CSS处理器 参考create-react-app配置文件,写一个一本满足css loader大餐: // mini-css-extract-plugin...添加模块,不accept,程序无法自动刷新。...,如果有 proxy.close(); res.rs=rs // 请求一个链接 proxy.web(req, res, proxyOption

    84420

    CentOSRedhat R包使用gcc编译

    R包在Linux下编译不通过,原因是gcc版本太低怎么办? 一些有C++代码R包可能会用到一些C++特性,需要C++11或者C++14。...这个问题通常在CentOS/红帽系统上出现,因为系统稳定要求,这个系列系统它C++版本很低。但请读者前往注意了别自己编译新版本gcc,然后替换掉系统。...正确解决方式是安装独立gcc,通过环境变量引用和使用它。...在Root用户下操作: yum install centos-release-scl yum install devtoolset-9 然后在你使用R用户下操作: # If you use your...“亲爱,”他对妻子说:“我铅笔放在哪儿了?”   “不正夹在你耳朵上吗?”妻子回答。   “没看到我忙得要死,你就不能说得具体一点,铅笔究竟夹在哪只耳朵上了?”教授有些生气了。

    63830
    领券