如何解决React官方脚手架不支持Less的问题(小结)

npm install -g create-react-app

npx create-react-app my-app

┌─node_modules ├─public├─src      ├─.gitignore├─package.json├─README.md└─yarn.lock

yarn add less less-loader

λ yarn ejectyarn run v1.6.0$ react-scripts eject? Are you sure you want to eject? This action is permanent. YesEjecting...Copying files into E:/React/my-app Adding /config/env.js to the project Adding /config/paths.js to the project Adding /config/polyfills.js to the project Adding /config/webpack.config.dev.js to the project Adding /config/webpack.config.prod.js to the project Adding /config/webpackDevServer.config.js to the project Adding /config/jest/cssTransform.js to the project Adding /config/jest/fileTransform.js to the project Adding /scripts/build.js to the project Adding /scripts/start.js to the project Adding /scripts/test.js to the projectUpdating the dependencies Removing react-scripts from dependencies Adding autoprefixer to dependencies Adding babel-core to dependencies Adding babel-eslint to dependencies Adding babel-jest to dependencies Adding babel-loader to dependencies Adding babel-preset-react-app to dependencies Adding babel-runtime to dependencies Adding case-sensitive-paths-webpack-plugin to dependencies Adding chalk to dependencies Adding css-loader to dependencies Adding dotenv to dependencies Adding dotenv-expand to dependencies Adding eslint to dependencies Adding eslint-config-react-app to dependencies Adding eslint-loader to dependencies Adding eslint-plugin-flowtype to dependencies Adding eslint-plugin-import to dependencies Adding eslint-plugin-jsx-a11y to dependencies Adding eslint-plugin-react to dependencies Adding extract-text-webpack-plugin to dependencies Adding file-loader to dependencies Adding fs-extra to dependencies Adding html-webpack-plugin to dependencies Adding jest to dependencies Adding object-assign to dependencies Adding postcss-flexbugs-fixes to dependencies Adding postcss-loader to dependencies Adding promise to dependencies Adding raf to dependencies Adding react-dev-utils to dependencies Adding resolve to dependencies Adding style-loader to dependencies Adding sw-precache-webpack-plugin to dependencies Adding url-loader to dependencies Adding webpack to dependencies Adding webpack-dev-server to dependencies Adding webpack-manifest-plugin to dependencies Adding whatwg-fetch to dependenciesUpdating the scripts Replacing "react-scripts start" with "node scripts/start.js" Replacing "react-scripts build" with "node scripts/build.js" Replacing "react-scripts test" with "node scripts/test.js"Configuring package.json Adding Jest configuration Adding Babel preset Adding ESLint configurationEjected successfully!Please consider sharing why you ejected in this survey: http://goo.gl/forms/Bi6CZjk1EqsdelXk1Done in 5.37s.

webpack.config.dev.js    # 开发环境配置webpack.config.prod.js   # 生产环境配置webpackDevServer.config.js # 开发服务器配置

// "postcss" loader applies autoprefixer to our CSS.// "css" loader resolves paths in CSS and adds assets as dependencies.// "style" loader turns CSS into JS modules that inject <style> tags.// In production, we use a plugin to extract that CSS to a file, but// in development "style" loader enables hot editing of CSS.{ 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',     }),    ],   },  },  {   loader: require.resolve('less-loader')  } ],},

@title-color:#f00;.App-title {  color: @title-color }

import './Test.less';