react中安装及应用less

唉，过程过于曲折 好在峰回路转 拨开云雾 见日出了

因为react是不支持 less 所以我们是需要改一下配置文件的

根据我犯多种错误 也让我总结了两种方法

第一种 ：不用暴漏webpack文件 （推荐）

安装less、less-loader、css-loader、style-loader

npm i less less-loader css-loader style-loader —save-dev

想要不暴漏webpack文件需要使用react-app-rewired但是只有这个插件是不行的还需要 customize-cra 自定义react-app-rewired核心功能的配置

npm i react-app-rewired --save-dev
npm i customize-cra --save-dev

新建config-overrides.js文件

const { override, addLessLoader } = require("customize-cra");
 
module.exports = override(
 
    addLessLoader({
 
        javascriptEnabled: true,
 
    })
 
);

修改package.json文件

"scripts": {
 
-   "start": "react-scripts start",
 
+   "start": "react-app-rewired start",
 
-   "build": "react-scripts build",
 
+   "build": "react-app-rewired build",
 
-   "test": "react-scripts test --env=jsdom",
 
+   "test": "react-app-rewired test --env=jsdom",
 
    "eject": "react-scripts eject"
}

我就不用新建了 因为根据我以前的文章我已经根据react的按需加载新建过了 所以我只需要改写一下就好了

const { override, fixBabelImports,addDecoratorsLegacy ,addLessLoader} = require('customize-cra');
const TerserPlugin = require('terser-webpack-plugin');
const addCustomize = () => config => {
    config.optimization.minimizer.push(new TerserPlugin({
        terserOptions: {
            parse: {
                ecma: 8,
            },
            compress: {
                ecma: 5,
                warnings: false,
                //drop_console: process.env.NODE_ENV === 'production',//打包时去掉代码中的 console.log
                drop_console: false,//打包时去掉代码中的 console.log
                comparisons: false,
                inline: 2,
            },
            mangle: {
                safari10: true,
            },
            output: {
                ecma: 5,
                comments: false,
                ascii_only: true,
            },
        },
        parallel: true,
        cache: true,
        sourceMap: process.env.NODE_ENV !== 'production',
    }));
    return config;
};

module.exports = override(
  fixBabelImports('import', {//配置antd按需加载
    libraryName: 'antd-mobile',
    style: 'css',
  }),addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            '@primary-color': '#0096ff'
        }
    }),//配置less，修改antd主题
  addDecoratorsLegacy(),//实现装饰器
   addCustomize()
);

附上我文件里面的所有内容

第二种 ：暴漏webpack文件

安装less、less-loader、css-loader、style-loader

npm i less less-loader css-loader style-loader —save-dev

暴漏配置文件

npm run eject

在 webpack.config.dev.js 和 webpack.config-prod.js 这两个配置文件更改

{
  test: /\.(css|less)$/,             //1. /.css$/ 改为 /.(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',
          }),
        ],
      },
    },
    //2.增加less-loader  的配置
    {
      loader: require.resolve('less-loader') // compiles Less to CSS
    }
  ],