在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文件

转载于:https://www.cnblogs.com/mmykdbc/p/8650700.html

在create-react-app的脚手架里面使用scss相关推荐

react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
Create React App 2.0 正式发布：Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
Vite 3.0 vs. Create React App：比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...

在create-react-app的脚手架里面使用scss

在create-react-app的脚手架里面使用scss相关推荐

最新文章

热门文章