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， 最后在页面上能够看到效果， 就行了

　　

 

 

　　

 

 

 

 

 参考博客:  http://www.javashuo.com/article/p-ppxfosrh-cw.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

　　错误图片:　 

 

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