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/package-lock.json b/package-lock.json
index 9ae3a91..4b10f71 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",
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 💻 |
Juetta 💻 |
+ LING_ZI_QING 💻 📖 |
diff --git a/src/customizers/webpack.js b/src/customizers/webpack.js
index e11b595..1002df4 100644
--- a/src/customizers/webpack.js
+++ b/src/customizers/webpack.js
@@ -118,30 +118,40 @@ export const enableEslintTypescript = () => config => {
return config;
};
-export const addLessLoader = (loaderOptions = {}) => config => {
- const mode = process.env.NODE_ENV === "development" ? "dev" : "prod";
+export const addLessLoader = (loaderOptions = {}, customCssModules = {}) => config => {
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+ const postcssNormalize = require("postcss-normalize");
+
+ const cssLoaderOptions = loaderOptions.cssLoaderOptions || {};
+
+ const { localIdentName } = loaderOptions;
+ let cssModules = loaderOptions.cssModules || { localIdentName };
+
+ if (!cssModules.localIdentName) {
+ cssModules = customCssModules;
+ }
+
+ cssModules.localIdentName = cssModules.localIdentName || "[local]--[hash:base64:5]";
- // 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 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 +167,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 +207,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"
+ )
}
);