开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

混入不能在create-react-app中使用dart-sass

在create-react-app中无法使用dart-sass的原因是create-react-app默认使用的是node-sass作为其内置的CSS预处理器，而dart-sass是另一种CSS预处理器，二者不兼容。

CSS预处理器是一种将CSS代码进行预处理的工具，可以提供更强大、更灵活的CSS编写方式。node-sass是基于Node.js的Sass编译器，而dart-sass是Dart语言实现的Sass编译器。

虽然在create-react-app中无法直接使用dart-sass，但可以通过其他方式来使用dart-sass。一种方法是使用自定义配置，将create-react-app的默认配置替换为支持dart-sass的配置。具体步骤如下：

首先，需要在项目中安装dart-sass的相关依赖。可以使用npm或者yarn进行安装，命令如下：
首先，需要在项目中安装dart-sass的相关依赖。可以使用npm或者yarn进行安装，命令如下：
或
或
安装完成后，在项目的根目录下创建一个.env文件，并在其中添加以下内容：
安装完成后，在项目的根目录下创建一个.env文件，并在其中添加以下内容：
接下来，在项目的根目录下创建一个src/setupTests.js文件，并在其中添加以下内容：
接下来，在项目的根目录下创建一个src/setupTests.js文件，并在其中添加以下内容：
最后，在项目的根目录下创建一个src/setupProxy.js文件，并在其中添加以下内容：
最后，在项目的根目录下创建一个src/setupProxy.js文件，并在其中添加以下内容：

完成以上步骤后，就可以在create-react-app中使用dart-sass了。在项目中使用.scss文件作为样式文件，并按照dart-sass的语法进行编写即可。

需要注意的是，由于create-react-app是一个由Facebook维护的开发工具，其默认配置是使用node-sass的，因此在使用dart-sass时可能会遇到一些兼容性问题或者配置上的困难。在这种情况下，建议使用其他支持dart-sass的项目脚手架或者自行配置webpack等构建工具来实现对dart-sass的支持。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关搜索:我不能在javascript函数中调用混入函数使用SASS将混入存储在混入的参数中 setAttribute不能在create-react-app中使用onClick 使用typescript不工作的create-react-app 使用Create-React-App时，Babel不翻译Map()使用create-react-app时npm start不运行 create-react-app和jest -不能在模块之外使用import语句为什么我不能在visual studio中使用绝对导入(使用create-react-app + typescript)？在create-react-app中无法使用tailwindcss 我不能在CSS中定位div而不搞乱动画 Alexa技能在Alexa模拟器中不返回任何内容不能在python 3中使用librosa 不能在meteor 1.4中使用BootstrapTour 有没有可能在Flutter中不添加Android插件就可以使用PlatformView？allOf不能在RAML 0.8中使用吗？不能在Python中循环使用selenium的链接不能在ionic 3中使用本机插件？不能在python 0.8.1中使用zstd compressobj()？Ios中不推荐使用'MDCTextInputControllerOutlined‘如何在create-react-app中使用公共文件夹中的脚本？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

create-react-app中CSS Module不生效的解决办法

在 Create React App 脚手架创建的项目中使用 CSS Modules 。

04

Vue-cli4.5 脚手架学习/超详细

前言/脚手架的介绍与作用： Vue-cli脚手架官方中文文档：cli.vuejs.org/zh/guide/ 1. vue脚手架是什么？它是一个专门为单页面（SPA）应用快速搭建繁杂的脚手架，它是基于webpack的基础开发出来的一款能够快速的帮助我们构建一个用来开发vue的项目目录、结构（vue和webpack的项目模板）。 vue脚手架通常使用在大型项目中，能够加快我们的开发速度。而小型项目不推荐使用脚手架，因为反而会拖慢我们项目的开发速度。 2. 为什么会有vue脚手架？因为 we

04

在create-react-app中使用sass

不管你是刚使用Reactjs或者是Reactjs的老司机，你们一定都听说过create-react-app这个脚手架，而从create-react-app的官方文档中，我们可以看到他们暂时还不支持直接导入LESS或者Sass。但是通过一些配置，我们还是可以从官方脚手架中使用sass/scss/less的。

02

create-react-app入门教程

Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。

02

腾讯 IMWeb 团队的前端构建秘籍

本文由 IMWeb 团队成员 eden 首发于腾讯内部 KM 论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。前言随着前端构架工具的不断发展，提供了很多提高我们的开发体验和开发效率的能力，同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员，早期的 webpack 配置复杂难懂，随着其发展，相关配置也不断简化，性能也不断提高，但是对于深入使用的开发人员，通常它的默认配置并不适用于业务开发，需要针对自己业务调整适配。你对 webpack 了解多少？如何针对业务

03

搭建Electron+Vue3开发环境

之前用 electron-vue 写过一个半成品的桌面端应用，但是是基于 Vue2 的，最近又想重写点桌面端应用，想要上 Vue3+TypeScript，于是便有了这篇文章总结下具体的搭建过程。

03

dart-sass和node-sass与eslint的几个选择

今天创建vue3项目，用cli创建的时候出现了css预处理器的选择，node-sass和dart-scss。记得以前都是选择node-sass，他们的区别忘了，重新查了查这两个的区别，发现已经不是之前记忆的区别了。

03

如何在 React 中引入 less？

本文主要写如何在 React 中引入 less 。因为 less 和 css 非常像，因此很容易学习。而且 less 仅对 css 语言增加了少许方便的扩展，这就是 less 如此易学的原因之一。

04

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

为了简化样式的描述，浏览器设计了 css 作为 DSL（领域特定语言）。css 写起来简单，但在很多方面都不太方便，比如不支持嵌套，代码比较冗余；不支持继承和混合，代码不好复用等。

01

React脚手架安装

对于现在市场上的产品选对框架也非常重要在很多TOC产品的开发中网站需要保证自身SEO可以考虑使用React的第三方框架Next.js

01

node-sass update to dart-sass

如果项目之前用到/deep/需要替换为::v-deep，否则会报错，全局搜索 /deep/ , 将项目里的 /deep/ 替换为 ::v-deep

02

element-ui图标偶现乱码问题的原因和修复方法

之前很老的一个 webpack3 前端项目，用 vue-cli5 重构了一下，根据 vue-cli 文档安装的 sass 版本 ^1.32.7，sass-loader 版本 ^12.0.0，各种自测感觉没问题了就部署到线上了。

02

01-React搭建react环境及SCSS的配置

零、前言关于React不做自我介绍了。 create-react-app 快速搭建React环境，自带热加载，服务器。电脑与手机在同一wifi下可以通过ip访问项目，实现手机电脑同时预览

02

Sass(Scss)、Less的区别与选择 + 基本使用

Sass(Scss)、Less 都是 CSS 预处理器，他们定义了一种新的语言，其基本思想是，用一种专门的编程语言为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。

00

vue（16）vue-cli创建项目以及项目结构解析[通俗易懂]

接着会问我们是否使用history router，其实直白来说就是是否路径带 # 号，建议选择 n，否则服务器还要进行配置

03

create-react-app创建的项目使用css-module问题整理

使用 create-react-app 创建的 React TypeScript 项目，如何以 Module 的形式引入 css 呢？

02

react项目搭建

1.全局安装脚手架 npm install -g create-react-app 2、创建项目，安装依赖 create-react-app my-react-app 3、进入项目 cd my-react-app 4、启动项目 npm start 5.首先安装路由组件：react-router-dom npm install react-router-dom --save-dev 6.安装 redux 的第三方模块： npm install redux --save npm install react-re

01

【React 实战教程】从0到1 构建 github star管理工具

在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。但是当我们star了许多项目之后，回过头想找一个的项目就会发现，很难在短时间内找到它，官方也并没有提供很好的管理我们的star项目的功能，因此在市面上也出现了一些对star进行管理的工具，比如说 astralapp，Star Order等等，其实github的接口api都是开放的，我们完全可以自己构建一个属于自己的项目管理工具。公司的前端技术栈是React，而笔者之前使用的是Vue，因此正好想利用github的open api 自己构建个react的github star管理项目来加深react的使用。而大体功能我们就模仿astralapp。

02

TypeScript学习进程（一）

npx create-react-app my-app --template typescript

01

element-ui图标偶现乱码问题的原因和修复方法

之前很老的一个 webpack3 前端项目，用 vue-cli5 重构了一下，根据 vue-cli 文档安装的 sass 版本 ^1.32.7，sass-loader 版本 ^12.0.0，各种自测感觉没问题了就部署到线上了。

02

让你说一说Sass、Less 的区别是什么，你知道吗？

Sass和Less是两种常见的CSS预处理器，它们都是CSS的一种抽象层，可以增加CSS代码的复用性，层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。虽然它们的功能类似，但是它们之间存在一些区别。

02

Vue-Cli该如何使用？Vue-Cli学习笔记，持续记录

修改.Env环境变量文件之后，需要重新运行server才会生效。环境变量通过process.ENV访问。可以在项目根目录中放置下列文件来指定环境变量：

02

react学习系列1 修改create-react-app配置支持stylus

注：由于前端更新非常快，写这篇文章时 create-react-app 使用的版本是1.4.1 最新的使用流程请参照官方文档。 create-react-app 是facebook推出的快速创建react项目的命令行工具。他和 vue-cli 类似。开箱即用，不用改一行配置就可以开发出针对开发和生产环境的react项目。比如针对开发环境有eslint语法检测，热重载，带有proxy server等功能。这些东西大多要归功于webpack的功劳。

02

51·[Vue项目]旺财记账-项目搭建

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

01

十分钟上手 Next.js

以前一直在用 create-react-app 来创建 React 项目，奈何 CRA 实在太难用了，今天花了点时间扫了一下 Next.js 的官网，发现用起来还挺简单的。

02

[译] 定制 create-react-app：如何制作自己的模版

原文：https://auth0.com/blog/how-to-configure-create-react-app/#Test-Your-Custom-Script

01

【React 实战教程】从0到1 构建 github star管理工具

在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。但是当我们star了许多项目之后，回过头想找一个的项目就会发现，很难在短时间内找到它，官方也并没有提供很好的管理我们的star项目的功能，因此在市面上也出现了一些对star进行管理的工具，比如说 astralapp，Star Order等等，其实github的接口api都是开放的，我们完全可以自己构建一个属于自己的项目管理工具。公司的前端技术栈是React，而笔者之前使用的是Vue，因此正好想利用github的open api 自己构建个react的github star管理项目来加深react的使用。而大体功能我们就模仿astralapp。

01

create-react-app webpack4升级webpack5

升级需要改动的文件包括分为package.js、 webpack.config.js、webpackDevServer.config 三处。

01

React 基础

JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码

02

谈谈 CSS 预处理器

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview

03

React.js基础知识总结一

React是FaceBook（脸书）公司研发的一款JS框架（MVC） React是一款框架：具备自己开发的独立思想(MVC：Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作

03

【原创】不想eject，还咋修改create-react-app的配置？

许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。今天胡哥就来带大家一起来看看这个问题~

04

京东快递H5项目接入vite实战

Tech 导读本文介绍了如何在开发阶段将vite应用于vue 2.x 工程，从而提高研发的开发体验与效率。主要涉及如何兼容process变量，如何处理 node-sass 与 dart-sass冲突，以及路径别名的兼容处理等。通过这篇文章可以为读者在vite接入过程中遇到的问题提供一些解决方案, 并帮助读者理清vue工程接入vite的具体思路。本文主要从整体介绍了新版会员徽章系统的设计方案以及未来规划，主要描述了等级模型的设计思路，读者可以通过本文对徽章系统的核心功能有初步的了解。

01

创建vue脚手架项目

PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL

03

Vue使用深度选择器在scoped中修改第三方样式

问题: 当我们在写业务时, 需要修改当前页面elementUI的样式, 但是为了不想修改的样式影响到别的组件, 需要添加scoped, 但是当我们添加了scoped后, 第三方样式的class后也会被

02

用于构建用户界面的JavaScript库---＞React

现在我们使用开发工具打开我们刚刚下载的项目，大家可以使用 Webstorm ， HBuilder X , Visual Studio Code 。我使用 Webstorm 。

01

Vue3 + Vite + TypeScript 项目搭建总结

node 版本>=12.0.0，这边建议直接更新到 16+（我本地的是最新的 v20.11.1）

01

React 安装

实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：

01

React环境创建

01

Vue CLi v3 创建项目使用记录

默认预设只包含Babel + ESLint，如需要使用到Router、CSS Pre-processors（CSS预处理器）等需要选手动选择特性。

01

vue3.0beta.1 创建项目安装node.js安装 vue-cli创建 vue 项目：运行项目浏览项目批处理（bat）文件项目结构

这个和以前的安装命令是不一样的，估计是要和以前的vue-cli做区别。如果安装了以前的版本，建议先卸载

03

React.js 结合 Next.js 的入门与 Snapaper 完全重构

背景申请季开始进入尾声... 前段时间有幸和「哈陆 Halu」一位去年刚入学加拿大滑铁卢大学的 dalao 通过交换友情链接认识了，他的博客链接是 → https://halu.lu ，保存在「伙伴」栏目名为「無位小站」。借着讨论 Nuxt.js 的机会和他聊了一聊，了解了一些他参加的 Co-op 项目和滑大数学系的情况... 他在博文中有提到他收到的另一所学校录取——华盛顿大学(也是 UW 🙂 ) 其世界综合排名会考前很多 (在 2020 US News 世界大学排名中最靠前，第 10 名，实属 da

02

指尖前端重构（React）技术分析报告

React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。

03

npx是什么

Node安装后自带npm模块，可以直接使用npx命令。如果不能使用用，就要手动安装一下。

02

create-react-app项目样式不生效的一种解决方法

之前写过一篇 create-react-app中CSS Module不生效的解决办法，但这个项目是自编码，需要 npm link 到主项目，所以就不能使用 CSS Module 写样式了。

01

你还在为node-sass烦恼吗？快试试官方推荐的dart-sass

众所周知，node-sass 是一个非常棒的工具，是前端工程师组织 CSS 的一个神兵利器。然而，用过的朋友都知道，node-sass 是让人既爱又恨！你爱它，因为它赋能了 CSS 工程化；你恨它，因为有时候你搞不懂它为什么又出差错了。我最近就在生产环境新踩了两次 node-sass 的坑，这让我下定决心放弃 node-sass。

04

通过 npm 创建 React App 项目

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭