转载001：create-react-app 脚手架不支持less解决方案

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

cd node_modules/react-scripts

2. 安装less、less-loader依赖包

a. yarn安装

yarn add less less-loader

b. npm安装

npm install --save less less-loader

3. 在react-scripts/config文件夹找到webpack.config.dev.js和webpack.config.prod.js两个文件

实测：在react-scripts/config文件夹找到webpack.config.dev.js和webpack.config.prod.js两个文件，在内容中找{ test: /\.css$/, .....}，按照上图更改两个地方代码，重启服务。有效。

 

扫描二维码关注公众号，回复： 854932 查看本文章

[plain] view plain copy

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.             )