用create-react-app 创建的项目不支持sass和less,需要手动配置

npm install node-sass sass-loader --save

然后在config/webpack.config.js中添加以下代码,红色框的是新添加的代码:

项目是采用create-react-app 搭建的脚手架工程如何应用CSS Module

 

1.在命令行运行 npm run eject 命令
2.运行完成之后,打开 config 目录下的 webpack.config.js 文件,找到 test: cssRegex 这一行
3.在 use 属性执行的方法中添加 modules: true,如下图:

 

CSS Module

CSS模块就是所有的类名都只有局部作用域的CSS文件。CSS Modules既不是官方标准,也不是浏览器的特性,而是在构建步骤(例如使用Webpack或Browserify)中对CSS类名选择器限定作用域的一种方式(通过hash实现类似于命名空间的方法)。
原理:在使用CSS模块时,类名是动态生成的,唯一的,并准确对应到源文件中的各个类的样式。

用法:

定义一个style.scss文件,例如内容为:
$green: #14c3c3;
.title {
font-size: 20px;
color: $green;
}

在文件中的使用:

import React, { Component } from 'react'
import style from './style.scss
class index extends Component {
render() {
return <div className={style.title}>这是我的详细页面哦</div>
}
}
export default index

CSS Module参考资料:https://www.jianshu.com/p/17fb9eb0a491

让create-react-app支持sass,less的更多相关文章

  1. 深入 Create React App 核心概念

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

  2. 使用create react app教程

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

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

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

  4. tap news:week5 0.0 create react app

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

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

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

  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] {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  ...

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

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

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

随机推荐

  1. vsftpd下载文件时内容乱码

    windows客户端访问Linux服务端的ftp并下载文档时,内容会出现乱码,这是由于vsftpd文件服务器不支持转码功能 通过java FTPClient下载 方法为 OutputStream is ...

  2. acm java入门(转载)

    ACM中java的使用 http://www.cnblogs.com/XBWer/archive/2012/06/24/2560532.html 这里指的java速成,只限于java语法,包括输入输出 ...

  3. C++类的对象和类的指针的区别

    #include <iostream> #include <string> using namespace std; class Student { public: stati ...

  4. Linux中设置系统时间和时区

    之前公司里有需求要做机器与服务器做时间同步,服务器发送时间戳和时区过来,机器这边根据接收到的时间戳和时区来改时间. 其实很简单,百度上应该也有很多博客有类似的教程,但是这里强调一点,百度上的博客里写的 ...

  5. Codeforces 1244D. Paint the Tree

    传送门 首先如果某个点的度数大于 $2$ 那么显然无解 然后考虑点的度数小于等于 $2$ 的情况 发现其实是一条链 一旦确定了链开头的两个点,后面的点的颜色都可以通过之前的点推出 所以直接枚举即可 # ...

  6. 怎样使用 Vue 的监听属性 watch ?

    需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , ...

  7. node 环境安装

    记录一下, 方便自己需要时用, 免得到处找 1. 官网下载安装node(选择LTS长期支持版本), 一路点击next即可(傻瓜式安装) 2. 验证是否正确安装, 打开命令窗口, 执行 node -v ...

  8. 【原创】大叔经验分享(68)maven工程查看jar包依赖

    1 idea 结果 2 maven命令 $ mvn dependency:tree 结果 [INFO] +- org.springframework.boot:spring-boot-starter- ...

  9. 简单了解soap协议

    SOAP的是什么的简写 soap是(Simple Object Access Protocal)的简写,即简单对象访问协议,它描述了一种在分散或分布式的环境中如何交换信息的轻量级协议. soap用来干 ...

  10. django 中间键重定向

    1,定义和注册中间件 在注册的中间件中使用: from django.http import HttpResponseRedirect '''下面的书写方法会陷入死循环,所以必须加判断条件只调用一次' ...