之前用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的更多相关文章

  1. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  2. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  3. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  4. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  5. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. [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 ...

  9. [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  ...

  10. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

随机推荐

  1. winform文本框不能粘贴、复制和屏蔽右键

    有3个常用方法 1.MouseMove事件中,使选不中 private void textBox3_MouseMove(object sender, MouseEventArgs e) { if (t ...

  2. PHP中Array的hash函数实现

    PHP中使用最多的非Array莫属了,那Array是如何实现的? 在PHP内部Array通过一个hashtable来实现,其中使用链接法解决hash冲突的问题,这样最坏情况下,查找Array元素的复杂 ...

  3. C语言 · 龟兔赛跑预测

    基础练习 龟兔赛跑预测   时间限制:1.0s   内存限制:512.0MB        锦囊1 模拟.   问题描述 话说这个世界上有各种各样的兔子和乌龟,但是研究发现,所有的兔子和乌龟都有一个共 ...

  4. Android——数据存储:手机内部存储

    存取字符串和存取图片不相同 xml <EditText android:layout_width="match_parent" android:layout_height=& ...

  5. Elasticsearch5.X IN Windows 10 系列文章(5)

    ElasticSearch版本: 5.5.1 (最新稳定版为5.5.2),由于用到IK中文分词插件,最新版本没有5.5.2 ,所以使用5.5.1 日期:2017-08-31 第五章:Kibana 安装 ...

  6. iOS边练边学--UIPickerView和UIDatePicker的简单使用

    一.点菜系统练习(UIPickerView) <1>UIPickerView的常用代理方法介绍 #pragma mark - <UIPickerViewDelegate> // ...

  7. mvn 仓库地址修改

    默认仓库的存储位置 Maven缺省的本地仓库路径为${user.home}/.m2/repository具体如下图 自定义修改仓库的存储位置: 可改变默认的 .m2 目录下的默认本地存储库文件夹通过修 ...

  8. FFmpeg API变化

    可以查看doc目录下的APIchanges和根目录下的Changelog 去掉了ffserver程序   'avcodec_register_all' is deprecated 还有av_regis ...

  9. mysql 创建新用户并添加权限

    1.添加用户 1.1 添加一个新用户: mysql>grant usage on *.* to " with grant option; 上面这种只支持mysql服务器本地登录. 1. ...

  10. 安装版的tomcat微信支付时报2字节的UTF-8序列的字节2无效