create-react-app不支持less的解决方式

Posted kungfupan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了create-react-app不支持less的解决方式相关的知识,希望对你有一定的参考价值。

进入node_modules eact-scriptsconfig目录

修改webpack.config.dev.js跟webpack.config.prod.js中关于loader的配置即可,注意loader是倒序执行的,less-loader需要先执行,所以写在规则的最后一个

 

 

 webpack.config.dev.js修改后的配置如下

{
            test: /.(css|less)$/,
            use: [
              require.resolve(‘style-loader‘),
{
loader: require.resolve(‘css-loader‘),
                options: {
                  importLoaders: 1,
                },
              },
              {
                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‘,
                    }),
                  ],
                },
              },
              require.resolve(‘less-loader‘)
            ],
          }

 

 

webpack.config.prod.js修改后的配置如下

 

{
            test: /.(css|less)$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
fallback: {
                    loader: require.resolve(‘style-loader‘),
                    options: {
                      hmr: false,
                    },
                  },
                  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‘,
                          }),
                        ],
                      },
                    },
                    require.resolve(‘less-loader‘)
                  ],
                },
                extractTextPluginOptions
              )
            ),
            // Note: this won‘t work without `new ExtractTextPlugin()` in `plugins`.
          }

以上是关于create-react-app不支持less的解决方式的主要内容,如果未能解决你的问题,请参考以下文章

create-react-app项目添加less配置

create-react-app搭配react16+ts+less

create-react-app使用less

不使用npm eject 修改create-react-app的wepack配置less-loader

使用 create-react-app 脚手架搭建 react 项目,释放配置文件且注入 less 依赖

create-react-app脚手架配置less