轉載001:create-react-app 腳手架不支持less解決方案

1. 在node_modules下找到react-scripts文件夾css

cd node_modules/react-scriptsnode

2. 安裝less、less-loader依賴包react

a. yarn安裝webpack

yarn add less less-loadergit

b. npm安裝github

npm install --save less less-loaderweb

3. 在react-scripts/config文件夾找到webpack.config.dev.js和webpack.config.prod.js兩個文件npm

實測:在react-scripts/config文件夾找到webpack.config.dev.js和webpack.config.prod.js兩個文件,在內容中找{ test: /\.css$/, .....},按照上圖更改兩個地方代碼,重啓服務。有效。app

 

[plain] view plain copyless

  1. {  
  2.             test: /\.(css|less)$/,  
  3.             loader: ExtractTextPlugin.extract(  
  4.               Object.assign(  
  5.                 {  
  6.                   fallback: require.resolve('style-loader'),  
  7.                   use: [  
  8.                     {  
  9.                       loader: require.resolve('css-loader'),  
  10.                       options: {  
  11.                         importLoaders: 1,  
  12.                         minimize: true,  
  13.                         sourceMap: shouldUseSourceMap,  
  14.                       },  
  15.                     },  
  16.                     {  
  17.                       loader: require.resolve('postcss-loader'),  
  18.                       options: {  
  19.                         // Necessary for external CSS imports to work  
  20.                         // https://github.com/facebookincubator/create-react-app/issues/2677  
  21.                         ident: 'postcss',  
  22.                         plugins: () => [  
  23.                           require('postcss-flexbugs-fixes'),  
  24.                           autoprefixer({  
  25.                             browsers: [  
  26.                               '>1%',  
  27.                               'last 4 versions',  
  28.                               'Firefox ESR',  
  29.                               'not ie < 9', // React doesn't support IE8 anyway  
  30.                             ],  
  31.                             flexbox: 'no-2009',  
  32.                           }),  
  33.                         ],  
  34.                       },  
  35.                     },  
  36.                     {  
  37.                       loader: require.resolve('less-loader'),  
  38.                     },  
  39.                   ],  
  40.                 },  
  41.                 extractTextPluginOptions  
  42.               )  
  43.             )  
相關文章
相關標籤/搜索