zoukankan      html  css  js  c++  java
  • createreactapp不支持less的解决方式

    进入node_modules\react-scripts\config目录

    修改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`.
              }
  • 相关阅读:
    leetcode 78. 子集 JAVA
    leetcode 91. 解码方法 JAVA
    leetcode 75. 颜色分类 JAVA
    leetcode 74 搜索二维矩阵 java
    leetcode 84. 柱状图中最大的矩形 JAVA
    last occurance
    first occurance
    classical binary search
    LC.234.Palindrome Linked List
    LC.142. Linked List Cycle II
  • 原文地址:https://www.cnblogs.com/kungfupan/p/9722991.html
Copyright © 2011-2022 走看看