create-react-app 脚手架不支持less解决方案

来源：互联网发布：女子篮球鞋知乎编辑：程序博客网时间：2024/04/30 01:15

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两个文件

{            test: /\.(css|less)$/,            loader: ExtractTextPlugin.extract(              Object.assign(                {                  fallback: require.resolve('style-loader'),                  use: [                    {                      loader: require.resolve('css-loader'),                      options: {                        importLoaders: 1,                        minimize: true,                        sourceMap: shouldUseSourceMap,                      },                    },                    {                      loader: require.resolve('postcss-loader'),                      options: {                        // Necessary for external CSS imports to work                        // https://github.com/facebookincubator/create-react-app/issues/2677                        ident: 'postcss',                        plugins: () => [                          require('postcss-flexbugs-fixes'),                          autoprefixer({                            browsers: [                              '>1%',                              'last 4 versions',                              'Firefox ESR',                              'not ie < 9', // React doesn't support IE8 anyway                            ],                            flexbox: 'no-2009',                          }),                        ],                      },                    },                    {                      loader: require.resolve('less-loader'),                    },                  ],                },                extractTextPluginOptions              )            )

阅读全文

0 0