From 7de91caf2aed2364ca242aa7789756afebaa628a Mon Sep 17 00:00:00 2001 From: LING_ZI_QING Date: Sat, 23 Nov 2019 05:32:54 +0800 Subject: [PATCH 1/3] update: addLessLoader (#185) * docs: add @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: update @onlyling as a contributor * docs: add @onlyling as a contributor * docs: update @onlyling as a contributor --- .all-contributorsrc | 10 ++++ api.md | 14 +++-- readme.md | 3 +- src/customizers/webpack.js | 109 ++++++++++++++++++++++++------------- 4 files changed, 92 insertions(+), 44 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 57b5b85..90755e0 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -153,6 +153,16 @@ "contributions": [ "code" ] + }, + { + "login": "onlyling", + "name": "LING_ZI_QING", + "avatar_url": "https://avatars3.githubusercontent.com/u/9999765?v=4", + "profile": "https://www.onlyling.com", + "contributions": [ + "code", + "doc" + ] } ], "contributorsPerLine": 7 diff --git a/api.md b/api.md index dab10f9..e1e6415 100644 --- a/api.md +++ b/api.md @@ -362,15 +362,13 @@ adjustWorkbox(wb => First, install `less` and `less-loader` packages: ```bash -yarn add less -yarn add --dev less-loader +yarn add --dev less less-loader ``` or: ```bash -npm i less -npm i -D less-loader +npm i -D less less-loader ``` After it's done, call `addLessLoader` in `override` like below: @@ -390,7 +388,13 @@ module.exports = override( addLessLoader({ strictMath: true, noIeCompat: true, - localIdentName: "[local]--[hash:base64:5]" // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'. + modifyVars: { + "@primary-color": "#1DA57A", // for example, you use Ant Design to change theme color. + }, + cssLoaderOptions: {}, // .less file used css-loader option, not all CSS file. + cssModules: { + localIdentName: "[path][name]__[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'. + }, }) ); ``` diff --git a/readme.md b/readme.md index 08902a2..f185511 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # `customize-cra` -[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors-) +[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-) This project provides a set of utilities to customize [`create-react-app`](https://github.com/facebook/create-react-app) versions 2 and 3 configurations leveraging [`react-app-rewired`](https://github.com/timarney/react-app-rewired/) core functionalities. @@ -147,6 +147,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d billypon
billypon
💻 Juetta
Juetta
💻 + LING_ZI_QING
LING_ZI_QING
💻 📖 diff --git a/src/customizers/webpack.js b/src/customizers/webpack.js index e11b595..4b7ca3c 100644 --- a/src/customizers/webpack.js +++ b/src/customizers/webpack.js @@ -119,29 +119,32 @@ export const enableEslintTypescript = () => config => { }; export const addLessLoader = (loaderOptions = {}) => config => { - const mode = process.env.NODE_ENV === "development" ? "dev" : "prod"; + const MiniCssExtractPlugin = require("mini-css-extract-plugin"); + const postcssNormalize = require("postcss-normalize"); - // Need these for production mode, which are copied from react-scripts - const publicPath = require("react-scripts/config/paths").servedPath; - const shouldUseRelativeAssetPaths = publicPath === "./"; - const shouldUseSourceMap = - mode === "prod" && process.env.GENERATE_SOURCEMAP !== "false"; + const cssLoaderOptions = loaderOptions.cssLoaderOptions || {}; + const cssModules = loaderOptions.cssModules || { + localIdentName: "[local]--[hash:base64:5]" + }; const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; - const localIdentName = - loaderOptions.localIdentName || "[path][name]__[local]--[hash:base64:5]"; - - const getLessLoader = cssOptions => { - return [ - mode === "dev" - ? require.resolve("style-loader") - : { - loader: require("mini-css-extract-plugin").loader, - options: Object.assign( - {}, - shouldUseRelativeAssetPaths ? { publicPath: "../../" } : undefined - ) - }, + + const webpackEnv = process.env.NODE_ENV; + const isEnvDevelopment = webpackEnv === "development"; + const isEnvProduction = webpackEnv === "production"; + const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false"; + const publicPath = config.output.publicPath; + const shouldUseRelativeAssetPaths = publicPath === "./"; + + // copy from react-scripts + // https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L93 + const getStyleLoaders = (cssOptions, preProcessor) => { + const loaders = [ + isEnvDevelopment && require.resolve("style-loader"), + isEnvProduction && { + loader: MiniCssExtractPlugin.loader, + options: shouldUseRelativeAssetPaths ? { publicPath: "../../" } : {} + }, { loader: require.resolve("css-loader"), options: cssOptions @@ -157,18 +160,34 @@ export const addLessLoader = (loaderOptions = {}) => config => { flexbox: "no-2009" }, stage: 3 - }) + }), + postcssNormalize() ], - sourceMap: shouldUseSourceMap + sourceMap: isEnvProduction && shouldUseSourceMap } - }, - { - loader: require.resolve("less-loader"), - options: Object.assign(loaderOptions, { - source: shouldUseSourceMap - }) } - ]; + ].filter(Boolean); + if (preProcessor) { + loaders.push( + { + loader: require.resolve("resolve-url-loader"), + options: { + sourceMap: isEnvProduction && shouldUseSourceMap + } + }, + { + loader: require.resolve(preProcessor), + // not the same as react-scripts + options: Object.assign( + { + sourceMap: true + }, + loaderOptions + ) + } + ); + } + return loaders; }; const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)) @@ -181,18 +200,32 @@ export const addLessLoader = (loaderOptions = {}) => config => { { test: lessRegex, exclude: lessModuleRegex, - use: getLessLoader({ - importLoaders: 2 - }), - sideEffects: mode === "prod" + use: getStyleLoaders( + Object.assign( + { + importLoaders: 2, + sourceMap: isEnvProduction && shouldUseSourceMap + }, + cssLoaderOptions + ), + "less-loader" + ) }, { test: lessModuleRegex, - use: getLessLoader({ - importLoaders: 2, - modules: true, - localIdentName: localIdentName - }) + use: getStyleLoaders( + Object.assign( + { + importLoaders: 2, + sourceMap: isEnvProduction && shouldUseSourceMap + }, + cssLoaderOptions, + { + modules: cssModules + } + ), + "less-loader" + ) } ); From 03701d76c43639309342b7d7cf7590bd93459acc Mon Sep 17 00:00:00 2001 From: Mark Chandler Date: Fri, 22 Nov 2019 16:35:14 -0500 Subject: [PATCH 2/3] 1.0.0-alpha.0 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6173ef3..31039d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "customize-cra", - "version": "0.9.1", + "version": "1.0.0-alpha.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 7ce48d2..57e8fc0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "customize-cra", - "version": "0.9.1", + "version": "1.0.0-alpha.0", "description": "", "repository": "arackaf/customize-cra", "main": "dist/index.cjs.js", From 438c33568604f34b4eb7948a1aeafc3b77dd0cd3 Mon Sep 17 00:00:00 2001 From: edwardwang0302 Date: Fri, 17 Jan 2020 23:33:46 +0800 Subject: [PATCH 3/3] Enhance addLessLoader --- src/customizers/webpack.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/customizers/webpack.js b/src/customizers/webpack.js index 4b7ca3c..1002df4 100644 --- a/src/customizers/webpack.js +++ b/src/customizers/webpack.js @@ -118,14 +118,21 @@ export const enableEslintTypescript = () => config => { return config; }; -export const addLessLoader = (loaderOptions = {}) => config => { +export const addLessLoader = (loaderOptions = {}, customCssModules = {}) => config => { const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const postcssNormalize = require("postcss-normalize"); const cssLoaderOptions = loaderOptions.cssLoaderOptions || {}; - const cssModules = loaderOptions.cssModules || { - localIdentName: "[local]--[hash:base64:5]" - }; + + const { localIdentName } = loaderOptions; + let cssModules = loaderOptions.cssModules || { localIdentName }; + + if (!cssModules.localIdentName) { + cssModules = customCssModules; + } + + cssModules.localIdentName = cssModules.localIdentName || "[local]--[hash:base64:5]"; + const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;