React配置Less方法和Sass方法 , webpack.

2019-12-13 本文已影响0人 Christoles

在yarn eject 之后：

1. create-react-app 新建项目

$ create-react-app add-less && cd add-less

yarn eject 暴露配置文件

$ yarn eject
$ react-scripts eject

NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. (y/N)

y 确认

修改 cofig/webpack.config.js
找到

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

修改为

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

找到

           {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

修改为

          {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

如果配置sass
直接下载

yarn add node-sass

注意：下载更改之后，要重新yarn start

另外一份配置less的文章
<meta charset="utf-8">

React 版本 16.8.4
写这篇文章是因为个人想使用蚂蚁金服的AntD UI写个demo，中间遇到一些坑，网上找到的一些方案有点过时，所以解决问题后决定自己写点经验和大家分享。
AntD是用less编写的，虽然可以直接引入CSS样式文件，但是为了方便修改AntD主题，我才在开发环境中添加了对less文件编译的支持。

创建项目
当前最新React版本是16.8.4.
使用create-react-app脚手架工具创建一个名为 ant-react 的项目：

image

项目创建完成后可以看到项目结构很精简，没有发现webpack配置文件。之后我们打开package.json文件：

image

这里大家注意看一下这里标注了react-scripts文件是2.x版本，https://reactjs.org/blog/2018/10/01/create-react-app-v2.html 此链接讲述了react-scripts文件的一些变化，主要添加对sass/scss样式文件的默认支持…

接下来安装less和less-loader插件包，打开终端输入：

cd ant-react
yarn add less less-loader

或者npm install less less-loader

配置less-loader
配置less-loader需要暴露webpack配置文件，这就要使用create-react-app脚手架工具提供的 eject 命令（见上图），运行命令前需要将项目commit一下，否则项目无法eject成功，打开终端运行 yarn eject命令（或者npm run eject），eject命令是一次性命令，运行后无法恢复，

yarn eject

命令运行结束之后会发现package.json 文件中多了很多内容，项目结构中多了一个config文件夹