diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json index c36817571..5b8023983 100644 --- a/packages/webpack5/package.json +++ b/packages/webpack5/package.json @@ -16,6 +16,7 @@ "prepack": "npm run build && cp -R src/stubs dist/stubs && chmod +x dist/bin/index.js" }, "dependencies": { + "@babel/core": "^7.12.9", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "@types/sax": "^1.2.1", "babel-loader": "^8.2.1", @@ -29,6 +30,9 @@ "fork-ts-checker-webpack-plugin": "^6.0.3", "loader-utils": "^2.0.0", "micromatch": "^4.0.2", + "postcss": "^8.1.13", + "postcss-import": "^13.0.0", + "postcss-loader": "^4.1.0", "raw-loader": "^4.0.2", "react-refresh": "^0.9.0", "sass": "^1.29.0", diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index dbf8609db..0f36cd7b8 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/packages/webpack5/src/configuration/base.ts @@ -166,6 +166,18 @@ export default function (config: Config, env: IWebpackEnv): Config { }, }); + // default PostCSS options to use + // projects can change settings + // via postcss.config.js + const postCSSOptions = { + postcssOptions: { + plugins: [ + // inlines @imported stylesheets + 'postcss-import', + ], + }, + }; + // set up css config.module .rule('css') @@ -174,7 +186,11 @@ export default function (config: Config, env: IWebpackEnv): Config { .loader('apply-css-loader') .end() .use('css2json-loader') - .loader('css2json-loader'); + .loader('css2json-loader') + .end() + .use('postcss-loader') + .loader('postcss-loader') + .options(postCSSOptions); // set up scss config.module @@ -186,6 +202,10 @@ export default function (config: Config, env: IWebpackEnv): Config { .use('css2json-loader') .loader('css2json-loader') .end() + .use('postcss-loader') + .loader('postcss-loader') + .options(postCSSOptions) + .end() .use('sass-loader') .loader('sass-loader'); diff --git a/packages/webpack5/src/helpers/externalConfigs.ts b/packages/webpack5/src/helpers/externalConfigs.ts index 68b4be5d6..ca0a9baff 100644 --- a/packages/webpack5/src/helpers/externalConfigs.ts +++ b/packages/webpack5/src/helpers/externalConfigs.ts @@ -9,6 +9,11 @@ import { clearCurrentPlugin, setCurrentPlugin } from '../index'; export function applyExternalConfigs() { getAllDependencies().forEach((dependency) => { const packagePath = getDependencyPath(dependency); + + if (!packagePath) { + return; + } + const configPath = path.join(packagePath, 'nativescript.webpack.js'); if (fs.existsSync(configPath)) {