React16 | create-react-app配置less

_____ 最新版cra2.1.8往下看________

先暴露出webpackConfig

npm run eject

安装less和less-loader

npm install less-loader less --save-dev

打开webpack.config.dev.js

 

         {
            test: /\.less$/,
            use: [{
              loader: "style-loader" // creates style nodes from JS strings
            }, {
              loader: "css-loader" // translates CSS into CommonJS
            }, {
              loader: "less-loader" // compiles Less to CSS
            }]
          },

 

webpack.config.prod.js：

        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
              use: [{
                loader: "css-loader",
                options: {
                  importLoaders: 1,
                  minimize: true,
                  sourceMap: shouldUseSourceMap,
                },
              }, {
                loader: "less-loader"
              }],
              // use style-loader in development
              fallback: "style-loader"
            })
          },

_____________________手动分割__________________________

更新了cra2.1.8：

 这次就更好改了

找到sassRegex,在附近加一个

           {
              test: /\.less$/,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

就是把sass的复制了下，改了正则。

不要忘了安装less和less-loader