React脚手架更新了 新的引入less的方法

npm install less less-loader --save-dev

npm run eject 暴露出webpack

找到config下的webpack.config.dev.js 和webpack.config.prod.js

先在 config.dev.js中 

// style files regexes
const cssRegex = /\\.css|less$/;
const cssModuleRegex = /\\.module\\.css$/;
const sassRegex = /\\.(scss|sass)$/;
const sassModuleRegex = /\\.module\\.(scss|sass)$/;

// common function to get style loaders
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  d 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,
          }),
        ],
      },
    },
    {
      loader: require.resolve(\'less-loader\')
    },
  ];
  if (preProcessor) {
    loaders.push(require.resolve(preProcessor));
  }
  return loaders;
};

把这段粘贴覆盖原来的代码 其实就是更改了css 为 css|less  然后增加了 loader：require.resolve(\"less-loader\")  

在config.prod.js中同样覆盖掉  否则打包less不好用 

这样重新npm run start 

创建index.less 文件 添加样式 

在js中引入import  ‘./index.less’  注意路径哟

就可以使用了    微信号wangguan920601 在学react 一起进步交流