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

　　錯誤圖片:　 

 

---恢復內容結束---