React支持dart-scss（偷梁换柱）

最新推荐文章于 2024-04-20 09:48:29 发布
最新推荐文章于 2024-04-20 09:48:29 发布
阅读量367 收藏 1
点赞数
文章标签： react.js scss sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web220507/article/details/125239055
版权
本文介绍了由于node-sass的下载和本地编译问题，转而使用Dart-scss的情况。在尝试将React项目切换到dart-scss时遇到不支持的问题。通过在package.json中设置别名，模拟node-scss来使用dart-scss，并解决了引用不便的问题，同时提到了安装dart-scss后可能出现的模块导入错误及解决方法。
摘要由CSDN通过智能技术生成

背景

node-sass下载速度慢，甚至下载报错。本地编译速度慢。而官方极力推荐使用Dart-sass，Dart运算速度快、易于安装 所以希望在React项目中使用dart-scss。 使用步骤： 命令行安装

yarn add dart-sass

安装成功后将css文件后缀修改为scss，结果报错告知使用node-scss。查了一下才知道React只支持node-scss不支持dart-scss。在这里插入图片描述 于是google上输入create react app dart sass搜索研究，在github的create-react-app的issue下面发现： 发现别人使用了如下的神奇命令

npm install node-sass@npm:dart-sass
// 或
yarn add  node-sass@npm:dart-sass

或者在package.json配置，修改dependencies配置如下，也可行

"node-sass": "npm:dart-sass",
"dart-sass": "^1.19.0"

骗过react，以为我们安装的node-sass，实际内部安装的是dart-sass。在node_modules中确认如下： 在这里插入图片描述

原理是&#

最低0.47元/天 解锁文章
web老猴子
关注
React支持dart-scss
北冥の魚
09-10 340
背景 node-sass下载速度慢，甚至下载报错。本地编译速度慢。而官方极力推荐使用Dart-sass，Dart运算速度快、易于安装 所以希望在React项目中使用dart-scss。 使用步骤： 命令行安装 yarn add dart-sass 安装成功后将css文件后缀修改为scss，结果报错告知使用node-scss。查了一下才知道React只支持node-scss不支持dart-scss。 于是google上输入create react app dart sass搜索研究，在github的crea
在 react项目中安装scss包
最新发布
听海边涛声
08-01 394
在 react项目中安装scss包
Dart中的const，Flutter，Dart，React Native
ZJQ的博客
03-30 609
翻译： Try changing the type of the parameter, or casting the argument to 'Widget'. new IconButton(icon: Icons.save, onPressed: null) 尝试更改参数的类型，或将参数强制转换为“Widget”。 新图标按钮（图标：Icons.save，onPresse...
react-dart:适用于React JS的Dart绑定
04-28
适用于Dart包装器 感谢的人们创建了这个项目！ :red_heart: 入门 安装 如果您不熟悉ReactJS库，请先阅读此。 安装Dart SDK brew install dart 在项目的根目录中创建一个pubspec.yaml文件，并添加react作为依赖项： name : your_package_name version : 1.0.0 environment : sdk : ^2.7.0 dependencies : react : ^6.0.0 使用pub安装依赖项： pub get 整理东西 HTML 在一个.html其中包括原生JavaScript文件react和react_dom您的内库（设置与此库为了兼容性的原因） .html文件，并用添加元素id挂载您阵营组分引入。 最后，添加Dart将生成的.js文件。 该文件将是包含main入口点的.dart文件的
推荐开源项目：React-Dart - JavaScript和Dart的完美结合
gitblog_00030的博客
04-20 292
推荐开源项目：React-Dart - JavaScript和Dart的完美结合 react-dart Dart Bindings for React JS 项目地址: https://gitcode.com/gh_mirrors/re/react-dart ...
Dart语法与React Native 之间的异同汇总
zhonglin的博客
07-17 441
参考张风捷特烈博客https://www.jianshu.com/p/7c826a5972ae 1.基础语法 (1)数字类型 ​ dart中数据类型有三种:int num double ,都是dart中的类,是对象级别的,默认值都为null ​ rn中 数字类型为number (2)布尔类型 ​ dart中bool类型为 bool eg. bool isMan = true; ​ rn中为boolean ,一般使用动态类型var 或 let ​ java中基本数据类型为boolean,类为B
react-cli-scss-starter:基于弹出的create-react-app的React 16 Starter并添加了SCSS支持
05-01
您可以在找到最新版本的create-react-app指南。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到...
react-reflux-babel-hotload-animation-scss-webpack-boilerplate:react-reflux-babel-hotload-animation-scss-boilerplate
06-12
react-reflux-babel-hotload-animation-scss-webpack-boilerplate 启用实时编辑 React 组件的最小开发环境。 用法 npm install npm start open http://localhost:3000 特征 计数器上的鼠标滚轮动画。 单击计数器...
react-redux-router-scss-boilerplate:React + Redux + React Router（v4）+ SCSS样板:satellite_antenna:
05-08
git clone https://github.com/woudsma/react-redux-router-scss-boilerplate my-project cd my-project npm install 发展 npm start 仅编辑.scss文件， .css文件会自动编译并重新加载。 创建一个.env.local文件来...
over_react:一个使用Dart构建静态类型的React UI组件的库
05-13
React过度 一个使用Dart构建静态类型的React UI组件的库。 该库还公开了OverReact Redux ，它具有。 流利的组件消耗 DOM组件和道具 组件格式 构建自定义组件 组件样板 组件最佳实践 贡献 迁移指南 UiComponent2 /组件样板迁移 最近，此库中进行了许多出色的改进，如果您拥有OverReact 3.1.0发行版之前构建的现有组件，则所有这些都需要您采取一些措施。 我们已竭尽所能，使迁移尽可能轻松自如-绝大多数更改由某些可在本地库中运行的codemod脚本处理。 与往常一样，如果您在迁移过程中遇到问题，则可以通过我们的聊天室与我们联系，或打开一个新的问题。 首先，您应该将组件升级到UiComponent2 。 查看《 UiComponent2迁移指南》以了解UiComponent2的优势，可以运行的codemod脚本以及可能需要手动进行的其他
react脚手架create-react-app配置sass
weixin_34259559的博客
01-24 140
本文介绍如何在react中配置sass (1)下载node (2)create-react-app 的安装 npm install -g create-react-app (3)搭建项目 1. create-react-app my-project 生成一个项目 2. cd my-project (4)配置sass 1.执行npm install...
通过与React的简单对比来入门Flutter
奇舞周刊
11-09 749
Flutter简介Flutter是谷歌开源的移动端应用开发框架，采用Dart语言作为开发语言，主要的特点是跨平台，高性能，高保真。一套代码同时运行在Android与IOS两端并且可以保持U...
Vue组件库必备 Sass(Dart) 知识
前端攻城狮
08-14 4414
Dart Sass 是Sass 的主要实现版本，这意味着它集成新功能要早于任何其它的实现版本。 Dart Sass 速度快、易于安装，并且可以被编译成纯JavaScript 代码，这使得它很容易集成到
sass
qq_26144233的博客
01-09 186
1.变量 1-2. 变量引用; （1）凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。 （2）scss中变量存在作用域，在不同{}中变量作用域不同。 （3）可以在一个变量中引用另一个变量。 $highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; } //编译后 .selected { border: 1
node-sass 安装失败解决办法
Mr_linjw的专栏
07-02 4489
很多小伙伴在安装node-sass的时候都失败了，主要的原因是node版本和项目依赖的node-sass版本不匹配。node-sass依赖node版本，而sass则不需要。解决方案：卸载node-sass，安装sass，项目全局搜索/deep/, 把/deep/替换为::v-deep即可。
使用 TS 开发 React 项目起手式
超超超Man的博客
12-19 1778
创建项目实际开发过程中，我们一般会使用 Typescript 开发 React 应用，所以不要直接运行 create-react-app 脚手架命令，而应该使用如下方式：// 1. 全局安装 create-react-app yarn global add create-react-app // 2. 创建支持 TS 语法的 React 应用 create-react-app my-app --template typescript 参考文档： https://create-react-app.dev/do
webpack支持scss文件，webpack sass配置
weixin_46787337的博客
07-12 1227
注意：这里是个坑，如果你在前端项目上配置webpack一定要安装的是而不是,这两个依赖不要同时装，同时装的话webpack优先使用那么就会报错
react-file-viewer支持zip
09-08
是的，react-file-viewer确实支持.zip文件的预览。zip文件是一种常见的压缩文件格式，包含了多个文件和文件夹。react-file-viewer可以通过解压缩zip文件，并提供预览和访问zip文件中的内容。 使用react-file-viewer...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值