在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项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
随机推荐
- 未找到与约束ContractName,无法打开项目的解决方案
如果VS2013,在打开解决方案时,报如下错误: “未找到与约束 ContractName Microsoft.Internal.VisualStudio.PlatformUI.ISolutionAt ...
- 【Unity】状态机的状态改变及其回调
问:怎么知道状态机发生了改变?即如何得知从一个状态切换到了另一个状态? 答:Unity使用StateMachineBehaviours类来描述状态机的行为,当状态机处于不同的状态时,会触发不同的回调. ...
- [ES6]探究数据绑定之Proxy
知识储备 Proxy 方式实现数据绑定中涉及到 Proxy.Reflect.Set.Map 和 WeakMap,这些都是 ES6 的新特性. Proxy Proxy 对象代理,在目标对象之前架设一层拦 ...
- Hibernate基本原理(一)
在开始学hibernate之前,一直就有人说:Hibernate并不难,无非是对JDBC进一步封装.一句不难,难道是真的不难还是眼高手低? 如果只是停留在使用的层面上,我相信什么技术都不难,看看别人怎 ...
- Nutch系列1:简介
由Java实现的,开放源代码(open-source)的web搜索引擎. Nutch 致力于让每个人都能很容易, 同时花费很少就可以配置世界一流的Web搜索引擎. 为了完成这一宏伟的目标, Nutch ...
- EMS快递单号生成算法
<?php function emsnum($ems, $num) { $fri = substr($ems, 2, 8); $head = substr($ems, 0, 2); $tail ...
- jquery json解析详解
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. JSON数据如下,是一个嵌套JSON: 1 {"comments":[ ...
- Oracle中的job的定时任务
Oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; selec ...
- e646. 处理鼠标点击事件
component.addMouseListener(new MyMouseListener()); public class MyMouseListener extends MouseAdapter ...
- (转)sqlite3使用中的常见问题
1. 创建数据如果不往数据库里面添加任何的表,这个数据库等于没有建立,不会在硬盘上产生任何文件,如果数据库已经存在,则会打开这个数据库. 2. 如何通过sqlite3.dll与sqlite3.def生 ...