React 添加对 Less 的支持, 使用 create-react-app 脚手架

---恢复内容开始---

参考博客与我自己的当前版本有一点出入, 所以就将参考博客写到文章后面去了。

我的电脑: 系统: Ubuntu16.04,

1，安装脚手架: create-react-app; 参考: https://ant.design/docs/react/use-with-create-react-app-cn

　　　　注意点: 如果这个命令 create-react-app 不是在任何目录下面使用，说明这个安装的时候没有将 create-react-app 命令变成全局的命令，改变

　　　　　　　　我自己添加了一个软连接:

　　　　　　　　　　pwd: /usr/sbin

　　　　　　　　　　lrwxrwxrwx 1 root root 58 Nov 14 08:12 create-react-app -> /usr/local/node/lib/node_modules/create-react-app/index.js*

2, 创建项目: create-react-app demo1;

3, 测试项目: yarn start; 浏览器可以正常打开 React 界面;

4, 添加 less, less-loader 模块: yarn add less less-loader;

5, 执行命令: yarn run eject; // 这个命令会生成一些文件用来支持 Less 的，具体原因也是不太清楚；[错误1:]

6, 然后就生成了: webpack.config.js 在 demo1/config/webpack.config.js 这个目录下面；

　　[ 网上很多说有: webpack.config.dev.js、webpack.config.prod.js] 這两个文件，但是我的就是没有生成，我的

　　demo1/package.json 文件如下:

{
  "name": "demo1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.11.6",
    "less-loader": "^4.1.0",
    "react": "^16.7.0",
    "react-app-rewire-less": "^2.1.3",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2"
  },

7, 然后修改 webpack.config.js 文件;

　　　　(1) 以前: const cssModuleRegex = /.module.css$/;

　　　　--> 修改成: const cssModuleRegex = /.module.(css|less)$/;

　　　　(2) 以前:

{
              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,
 },

　　修改成: 加上 'less-loader'

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders(
                  {
                      importLoaders: 1,
                      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,
},

　　(3) 以前:

{
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },

View Code

　　修改后: 添加 'less-loader'

{
              test: cssModuleRegex,
              use: getStyleLoaders(
                  {
                      importLoaders: 1,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                      modules: true,
                      getLocalIdent: getCSSModuleLocalIdent,
                  },
                  'less-loader'
              ),
            },

View Code

8, 然后在 App.js 同目录下写一个 test.less

　　#testless {

　　　　color: red;

　　}

　　然后在 App.js 中引用就好了；

9，最后在页面上可以看到效果，就好了

参考博客: https://www.cnblogs.com/esofar/p/9631657.html

错误1:

　错误: This git repository has untracked files or uncommitted changes:

错误解决: 到项目根目录 /demo1 下面先 git add .; 再 git commit -m "init"; 然后就可以 yarn run eject; 了

　　参考博客: http://react-china.org/t/create-react-app-npm-run-eject/22051/5

　　错误图片:　

---恢复内容结束---