react项目配置less

最新推荐文章于 2024-08-28 04:05:46 发布

小猿猪哥

最新推荐文章于 2024-08-28 04:05:46 发布

阅读量603

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 学习记录文章标签： reacr less

本文链接：https://blog.csdn.net/zhuming3834/article/details/85089687

react 学习记录专栏收录该内容

13 篇文章

订阅专栏

安装 less

npm install --save less less-loader

配置 webpack.config.dev.js

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

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';