1. 在node_modules下找到react-scripts文件夹
cd node_modules/react-scripts
2. 安装less、less-loader依赖包
a. yarn安装
yarn add less less-loader
b. npm安装
npm install --save less less-loader
3. 在react-scripts/config文件夹找到webpack.config.dev.js和webpack.config.prod.js两个文件
实测:在react-scripts/config文件夹找到webpack.config.dev.js和webpack.config.prod.js两个文件,在内容中找{ test: /\.css$/, .....},按照上图更改两个地方代码,重启服务。有效。
[plain]
- {
- test: /\.(css|less)$/,
- loader: ExtractTextPlugin.extract(
- Object.assign(
- {
- fallback: require.resolve('style-loader'),
- use: [
- {
- loader: require.resolve('css-loader'),
- options: {
- importLoaders: 1,
- minimize: true,
- sourceMap: shouldUseSourceMap,
- },
- },
- {
- 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'),
- },
- ],
- },
- extractTextPluginOptions
- )
- )