react项目配置less

安装 less

npm install --save less less-loader

配置 webpack.config.dev.js

在目录:node_modules/react-script/config/webpack.config.dev.js

  1. const cssRegex = /.(css|less)$/;
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
          px2rem({remUnit: 75}) // 配置过  rem的。
        ],
      },
    },
    {
      loader: require.resolve('less-loader') // compiles Less to CSS
    }
  ];
  if (preProcessor) {
    loaders.push(require.resolve(preProcessor));
  }
  return loaders;
};
exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/, /\.(css|less)$/],
loader: require.resolve('file-loader'),
options: {
  name: 'static/media/[name].[hash:8].[ext]',
},

加入了 /\.(css|less)$/
4. 配置 node_modules/react-script/config/webpack.config.prod.js 同上
5. 引用:import '../assets/css/nav.less';

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页