diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index e1def86fe0..fe1e858af4 100644 --- a/packages/docusaurus/package.json +++ b/packages/docusaurus/package.json @@ -56,6 +56,8 @@ "null-loader": "^3.0.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "portfinder": "^1.0.21", + "postcss-loader": "^3.0.0", + "postcss-preset-env": "^6.6.0", "react-dev-utils": "^9.0.1", "react-helmet": "^6.0.0-beta", "react-loadable": "^5.5.0", diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts index 42eda6f9fd..5867ae53ef 100644 --- a/packages/docusaurus/src/webpack/base.ts +++ b/packages/docusaurus/src/webpack/base.ts @@ -140,7 +140,7 @@ export function createBaseConfig( test: CSS_REGEX, exclude: CSS_MODULE_REGEX, use: getStyleLoaders(isServer, { - importLoaders: 0, + importLoaders: 1, sourceMap: !isProd, }), }, @@ -150,7 +150,7 @@ export function createBaseConfig( test: CSS_MODULE_REGEX, use: getStyleLoaders(isServer, { modules: true, - importLoaders: 0, + importLoaders: 1, localIdentName: `[local]_[hash:base64:8]`, sourceMap: !isProd, exportOnlyLocals: isServer, diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts index dcecc232ee..2bacd9a794 100644 --- a/packages/docusaurus/src/webpack/utils.ts +++ b/packages/docusaurus/src/webpack/utils.ts @@ -40,6 +40,24 @@ export function getStyleLoaders( loader: require.resolve('css-loader'), options: cssOptions, }, + { + // Options for PostCSS as we reference these options twice + // Adds vendor prefixing based on your specified browser support in + // package.json + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebook/create-react-app/issues/2677 + ident: 'postcss', + plugins: () => [ + require('postcss-preset-env')({ + autoprefixer: { + flexbox: 'no-2009', + }, + }), + ], + }, + }, ].filter(Boolean) as Loader[]; return loaders; }