在create-react-app的脚手架里面使用scss
之前用vue-cli脚手架的时候,只需要引进sass需要的依赖包便可以引入scss,但是在create-react-app的时候,发现除了需要引入sass依赖,还需要进行配置:
不管用什么方法进行sass的使用,都要引入sass的相关依赖:
npm install sass-loader node-sass --save-dev
方法一:进行webpack.config的配置,直接在文件中引入scss
1.找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js文件(两个文件都要改)
将module配置项的最后一项配置改成如下:
{ loader: require.resolve('file-loader'), loaders. exclude: [/\.js$/, /\.html$/, /\.json$/,/\.scss$/], options: { name: 'static/media/[name].[hash:8].[ext]', }, }, { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], }
2.3.在入口js 文件中引入:import './***.scss';
3.在package.json中srcipt 引入:build-css ,watch-css
方法二:使用node-sass-chokidar,将scss转移成css,在文件中引入
1.下载node-sass-chokidar的依赖包:
npm install --save node-sass-chokidar
2.在package.json中srcipt 引入:build-css ,watch-css
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
3.运行npm run watch-css,在文件中引入编译的css文件
在create-react-app的脚手架里面使用scss的更多相关文章
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
随机推荐
- winform文本框不能粘贴、复制和屏蔽右键
有3个常用方法 1.MouseMove事件中,使选不中 private void textBox3_MouseMove(object sender, MouseEventArgs e) { if (t ...
- PHP中Array的hash函数实现
PHP中使用最多的非Array莫属了,那Array是如何实现的? 在PHP内部Array通过一个hashtable来实现,其中使用链接法解决hash冲突的问题,这样最坏情况下,查找Array元素的复杂 ...
- C语言 · 龟兔赛跑预测
基础练习 龟兔赛跑预测 时间限制:1.0s 内存限制:512.0MB 锦囊1 模拟. 问题描述 话说这个世界上有各种各样的兔子和乌龟,但是研究发现,所有的兔子和乌龟都有一个共 ...
- Android——数据存储:手机内部存储
存取字符串和存取图片不相同 xml <EditText android:layout_width="match_parent" android:layout_height=& ...
- Elasticsearch5.X IN Windows 10 系列文章(5)
ElasticSearch版本: 5.5.1 (最新稳定版为5.5.2),由于用到IK中文分词插件,最新版本没有5.5.2 ,所以使用5.5.1 日期:2017-08-31 第五章:Kibana 安装 ...
- iOS边练边学--UIPickerView和UIDatePicker的简单使用
一.点菜系统练习(UIPickerView) <1>UIPickerView的常用代理方法介绍 #pragma mark - <UIPickerViewDelegate> // ...
- mvn 仓库地址修改
默认仓库的存储位置 Maven缺省的本地仓库路径为${user.home}/.m2/repository具体如下图 自定义修改仓库的存储位置: 可改变默认的 .m2 目录下的默认本地存储库文件夹通过修 ...
- FFmpeg API变化
可以查看doc目录下的APIchanges和根目录下的Changelog 去掉了ffserver程序 'avcodec_register_all' is deprecated 还有av_regis ...
- mysql 创建新用户并添加权限
1.添加用户 1.1 添加一个新用户: mysql>grant usage on *.* to " with grant option; 上面这种只支持mysql服务器本地登录. 1. ...
- 安装版的tomcat微信支付时报2字节的UTF-8序列的字节2无效