1. 在node_modules下找到react-scripts文件夾css
cd node_modules/react-scriptsnode
2. 安裝less、less-loader依賴包react
a. yarn安裝webpack
yarn add less less-loadergit
b. npm安裝github
npm install --save less less-loaderweb
3. 在react-scripts/config文件夾找到webpack.config.dev.js和webpack.config.prod.js兩個文件npm
實測:在react-scripts/config文件夾找到webpack.config.dev.js和webpack.config.prod.js兩個文件,在內容中找{ test: /\.css$/, .....},按照上圖更改兩個地方代碼,重啓服務。有效。app
[plain] view plain copyless
- {
- 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
- )
- )