create-react-app 如何使用 less，sass 和 react-css-modules?

• create-react-app 如何使用 less？
• create-react-app 如何使用 sass？
• create-react-app 如何使用 react-css-modules？

Thanks @pengzeya

1.create-react-app 如何使用 less？

安装 less-watch-compiler 到开发依赖。

1

npm i less-watch-compiler --save-dev

添加 scripts

1
2
3
4

"scripts": {
  "build-css": "less-watch-compiler --run-once --main-file=index.less src/less src/css",
  "watch-css": "npm run build-css && less-watch-compiler --main-file=index.less src/less src/css"
}

运行命令

1

npm run watch-css

运行结果
创建 css 目录并生成编译后的 index.css 文件

1

src/less/index.less    →    src/css/index.css

程序运行起来后，会监控对应目录下的.less 文件，热更新到 css 目录下。

参考：https://github.com/facebook/create-react-app/issues/3457

2.create-react-app 如何使用 sass？

安装 node-sass-chokidar 到依赖

1

npm install --save node-sass-chokidar

添加 scripts

1
2

"build-css": "node-sass-chokidar src/sass -o src/css",
"watch-css": "npm run build-css && node-sass-chokidar src/sass -o src/css --watch --recursive",

运行命令

1

npm run watch-css

运行结果
创建 css 目录并生成编译后的 index.css 文件

1

src/sass/index.scss    →    src/css/index.css

程序运行起来后，会监控对应目录下的.scss 文件，热更新到 css 目录下。

参考：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

3.create-react-app 如何使用 react-css-modules？

暴露出配置文件：

1

npm run eject

运行 eject 命令后，CRA 会自动把 wepack 中与 css-modules 相关的依赖为我们准备好，无需新增多余的依赖。

修改 config/webpack.config.dev.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 修改前
{
  loader: require.resolve(''css-loader''),
  options: {
    importLoaders: 1,
  },
},
// 修改后
{
  loader: require.resolve(''css-loader''),
  options: {
    importLoaders: 1,
    modules: true,
    localIdentName: "[name]__[local]___[hash:base64:5]"  
  },
},

修改 config/webpack.config.prod.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 修改前
{
  loader: require.resolve(''css-loader''),
  options: {
    importLoaders: 1,
    minimize: true,
    sourceMap: true,
   },
},
// 修改后
{
  loader: require.resolve(''css-loader''),
  options: {
    importLoaders: 1,
    modules: true,
    minimize: true,
    sourceMap: true,
   },
},

代码变化：
引入 CSS Modules 之前:

1
2
3
4
5
6
7
8
9
10
11
12
13

import React, { Component } from ''react'';
import logo from ''./logo.svg'';
import ''./foo.css'';
class App extends Component {
  render() {
    return (
      <div className="bar">

      </div>
    );
  }
}
export default App;

引入 CSS Modules 之后：

1
2
3
4
5
6
7
8
9
10
11
12
13

import React, { Component } from ''react'';
import logo from ''./logo.svg'';
import foo from ''./foo.css'';
class App extends Component {
  render() {
    return (
      <div className={foo.bar}>

      </div>
    );
  }
}
export default App;

添加 css-modules 之前：

1
2
3
4

.bar{
    display: block;
    background: yellow;
}

添加 css-modules 之后：

1
2
3
4

.foo__bar__1t6eA{
    display: block;
    background: yellow;
}

运行结果

1

.bar   →    foo__bar__1t6eA

注意事项：

• 将 import 进来的’./SomeComponent.css’分配给一个本地常量，例如，import foo from ‘./foo.css’;
• 在 JSX 中将 className 替换成的形式 {styles.myClass}，例如，className={styles.myClass}.
• 需要修改 CSS 文件和 JSX 中的 class 名。因为 CSS Modules 不允许”-“出现在类名中，有过开发经验的朋友都知道，正则中有”word” 与”none-word” 之分，word 包括 0~9,a~z 以及下划线。而”-“不属于单词，因此 CSS Modules 不支持。例如我们需要将.Foo.bar 修改为.bar，某些方面也简化了我们的代码。使用 CSS Modules 之后，我们就不需要再使用 BEM 之类的 CSS 规范。

参考：https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2

create-react-app+antd+react-css-modules配置

快速开始：

npm install -g create-react-app       /* 安装create-react-app */

npm install -g create-react-app       /* 安装yarn */

create-react-app myapp                /* 使用命令创建应用，myapp为项目名称 */

cd myapp                              /* 进入目录 */

yarn start                            /* 启动项目 */

按以上执行，即可快速创建React开发环境。

打开http://localhost:3000/ 查看

环境配置：

生成项目后，脚手架为了“优雅”... ...隐藏了所有的webpack相关的配置文件，此时查看myapp文件夹目录，会发现找不到任何webpack配置文件。执行以下命令：

yarn eject

再查看myapp 文件夹，可以看到完整的项目结构：

myapp/

    node_modules/

    package.json

    .gitignore

    config/

        paths.js

        polyfills

        env.js

        webpack.config.dev.js /* 开发环境配置文件 */

        webpack.config.prod.js /* 生产环境配置文件 */

    public/

        index.html   /* 入口html文件 */

    scripts/

        build.js

        start.js

        test.js

    src/

        App.js

        index.js    /* 主入口文件 */

antd配置

yarn add antd babel-plugin-import

按需引入

为减少打包后体积以及方便书写，可用babel-plugin-import插件，配置在config目录下，

webpack.config.dev.js 和 webpack.config.prod.js文件,这里以webpack.config.dev.js举例，

webpack.config.prod.js一样配置即可：

// Process JS with Babel.
          {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loader: require.resolve(''babel-loader''),
            options: {
              // 改动: 添加 antd 按需加载文件处理插件
              plugins: [
                //[''react-html-attrs''],//添加babel-plugin-react-html-attrs组件的插件配置
                // 引入样式为 css
                [''import'', { libraryName: ''antd'', style: ''css'' }],
                // 改动: 引入样式为 less
                //  [''import'', { libraryName: ''antd'', style: true }],
              ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },

引入模块如下：

 // scr/App.js
  import React, { Component } from ''react'';
- import Button from ''antd/lib/button'';
+ import { Button } from ''antd'';
  import ''./App.css'';

CSS Modules 配置

antd 和 css modules 不能混用，看知乎大神说 可以

针对antd的css 单独写一条loader的规则,不开启 css modules。

使用 exclude 和 include 配置

配置在config目录下，同样修改配置 webpack.config.dev.js 文件

          {
            test: /\.css$/,
            exclude: /node_modules|antd\.css/,
            use: [
              require.resolve(''style-loader''),
              {
                loader: require.resolve(''css-loader''),
                options: {
                  importLoaders: 1,
                  // 改动
                  modules: true,   // 新增对css modules的支持
                  localIdentName: ''[name]__[local]__[hash:base64:5]'', //
                },
              },
              {
                loader: require.resolve(''postcss-loader''),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: ''postcss'',
                  plugins: () => [
                    require(''postcss-flexbugs-fixes''),
                    autoprefixer({
                      browsers: [
                        ''>1%'',
                        ''last 4 versions'',
                        ''Firefox ESR'',
                        ''not ie < 9'', // React doesn''t support IE8 anyway
                      ],
                      flexbox: ''no-2009'',
                    }),
                  ],
                },
              },
            ],
          },
          //
          {
            test: /\.css$/,
            include: /node_modules|antd\.css/,
            use: [
              require.resolve(''style-loader''),
              {
                loader: require.resolve(''css-loader''),
                options: {
                  importLoaders: 1,
                  // 改动
                  // modules: true,   // 新增对css modules的支持
                  // localIdentName: ''[name]__[local]__[hash:base64:5]'', //
                },
              },
              {
                loader: require.resolve(''postcss-loader''),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: ''postcss'',
                  plugins: () => [
                    require(''postcss-flexbugs-fixes''),
                    autoprefixer({
                      browsers: [
                        ''>1%'',
                        ''last 4 versions'',
                        ''Firefox ESR'',
                        ''not ie < 9'', // React doesn''t support IE8 anyway
                      ],
                      flexbox: ''no-2009'',
                    }),
                  ],
                },
              },
            ],
          },

下面是一个 antd 的 Button 和自己写的CSS Modules 使用小例子：

import React, { Component } from ''react'';
import { addRecipe } from ''../actions'';
import { Button } from ''antd'';
import styles from ''./App.css''

class App extends Component {
  state = {
    calendar: null
  }
  componentDidMount() {
    const { store } = this.props // 从props获取store
    store.subscribe(() => { // 订阅 redux store 中发生的任何变化
      this.setState(() => ({ // 有任何变化需要调用 setState
        calendar: store.getState() // 将从store中获取state将它放入本地组件state中
      }))
    })
  }
  submitFood = () => {
    this.props.store.dispatch(addRecipe({//store.dispatch调用addRecipe动作生成器
      day: ''monday'',
      meal: ''breakfast'',
      recipe: {
        label: this.input.value
      }
    }))
    this.input.value = ''''//将输入值重置为一个空的字符串
  }
  render() {
    return (
      <div>
        <input
          type=''text''
          ref={(input)=>this.input = input}
          placeholder="Monday''s Breakfast"
        />
        <Button type="primary" onClick={this.submitFood}>Submit</Button>

        <pre className={styles.input}>Monday''s Breakfast:{this.state.calendar&&this.state.calendar.monday.breakfast}</pre>

      </div>
    );
  }
}

export default App

参考学习 CSS Modules 的阮一峰老师写的用法教程

这里简单使用下 react-css-modules,代码如下：

import React, { Component } from ''react'';
import { addRecipe } from ''../actions'';
import { Button } from ''antd'';
import CSSModules from ''react-css-modules''
import styles from ''./App.css''

class App extends Component {
  state = {
    calendar: null
  }
  componentDidMount() {
    const { store } = this.props // 从props获取store
    store.subscribe(() => { // 订阅 redux store 中发生的任何变化
      this.setState(() => ({ // 有任何变化需要调用 setState
        calendar: store.getState() // 将从store中获取state将它放入本地组件state中
      }))
    })
  }
  submitFood = () => {
    this.props.store.dispatch(addRecipe({//store.dispatch调用addRecipe动作生成器
      day: ''monday'',
      meal: ''breakfast'',
      recipe: {
        label: this.input.value
      }
    }))
    this.input.value = ''''//将输入值重置为一个空的字符串
  }
  render() {
    return (
      <div>
        <input
          type=''text''
          ref={(input)=>this.input = input}
          placeholder="Monday''s Breakfast"
        />
        <Button type="primary" onClick={this.submitFood}>Submit</Button>

        <pre styleName=''input''>Monday''s Breakfast:{this.state.calendar&&this.state.calendar.monday.breakfast}</pre>

      </div>
    );
  }
}

export default CSSModules(App, styles);

主要差别在于：

+ import CSSModules from ''react-css-modules''

- <pre className={styles.input}>
+ <pre styleName=''input''>

- export default App
+ export default CSSModules(App, styles);

create-react-app不支持less的解决方式

进入node_modules\react-scripts\config目录

修改webpack.config.dev.js跟webpack.config.prod.js中关于loader的配置即可，注意loader是倒序执行的，less-loader需要先执行，所以写在规则的最后一个

 webpack.config.dev.js修改后的配置如下

webpack.config.prod.js修改后的配置如下

关于带有节点Express的create-react-app获得％PUBLIC_URL％和react ref获取节点的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于app.use(express.static(__dirname + '/public')) 和 app.use(express.static('public')) 的区别；、create-react-app 如何使用 less，sass 和 react-css-modules?、create-react-app+antd+react-css-modules配置、create-react-app不支持less的解决方式的相关知识，请在本站寻找。