From 964568d09dfef142e6648b2cc50a1bce1fea0f3f Mon Sep 17 00:00:00 2001 From: ernscht Date: Mon, 4 Nov 2024 20:56:13 +0100 Subject: [PATCH] feat(webpack): add possibility to add options for the sass implementation --- packages/nitro-webpack/readme.md | 3 ++- .../nitro-webpack/webpack-config/webpack.config.dev.js | 3 ++- .../nitro-webpack/webpack-config/webpack.config.prod.js | 3 ++- packages/project-nitro-twig/config/webpack/options.js | 7 ++++++- packages/project-nitro-twig/project/docs/nitro-webpack.md | 5 +++-- .../project-nitro-typescript/config/webpack/options.js | 7 ++++++- .../project-nitro-typescript/project/docs/nitro-webpack.md | 5 +++-- packages/project-nitro/project/docs/nitro-webpack.md | 5 +++-- 8 files changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/nitro-webpack/readme.md b/packages/nitro-webpack/readme.md index b5066c22..85a3751f 100644 --- a/packages/nitro-webpack/readme.md +++ b/packages/nitro-webpack/readme.md @@ -68,6 +68,7 @@ Config: - `true` or `{}` will activate scss support - `{ publicPath: '../' }` provide a separate public path for stylesheets. By default, webpack uses the value from 'output.publicPath'. (only relevant for production build) - `{ implementation: require('node-sass') }` gives the possibility to use 'node-sass' as sass implementation. (you have to add 'node-sass' as a dev-dependency in your project) +- `{ sassOptions: { ... } }` gives the possibility to add options for the ['dart-sass'](https://sass-lang.com/documentation/js-api/interfaces/options/) or ['node-sass'](https://github.com/sass/node-sass/#options) implementation (e.g. ignore some deprecations for dart-sass with `silenceDeprecations: [...]`) #### `options.rules.hbs` @@ -77,7 +78,7 @@ Config: Config: -- `true` or `{}` will activate handlebars handlebars precompiled templates support +- `true` or `{}` will activate handlebars precompiled templates support - `{ include: [] }` additionally adds include config to rule - `{ exclude: [] }` additionally adds exclude config to rule diff --git a/packages/nitro-webpack/webpack-config/webpack.config.dev.js b/packages/nitro-webpack/webpack-config/webpack.config.dev.js index fe39d084..710740af 100644 --- a/packages/nitro-webpack/webpack-config/webpack.config.dev.js +++ b/packages/nitro-webpack/webpack-config/webpack.config.dev.js @@ -116,7 +116,8 @@ module.exports = (options = { rules: {}, features: {} }) => { // css & scss if (options.rules.scss) { const scssLoaderOptions = { - ...(options.rules.scss.implementation && { implementation: options.rules.scss.implementation }) + ...(options.rules.scss.implementation && { implementation: options.rules.scss.implementation }), + ...(options.rules.scss.sassOptions && { sassOptions: options.rules.scss.sassOptions }), }; webpackConfig.module.rules.push({ test: /\.s?css$/, diff --git a/packages/nitro-webpack/webpack-config/webpack.config.prod.js b/packages/nitro-webpack/webpack-config/webpack.config.prod.js index b43d2eb7..ed5f404b 100644 --- a/packages/nitro-webpack/webpack-config/webpack.config.prod.js +++ b/packages/nitro-webpack/webpack-config/webpack.config.prod.js @@ -111,7 +111,8 @@ module.exports = (options = { rules: {}, features: {} }) => { ...(options.rules.scss.publicPath && { publicPath: options.rules.scss.publicPath }) }; const scssLoaderOptions = { - ...(options.rules.scss.implementation && { implementation: options.rules.scss.implementation }) + ...(options.rules.scss.implementation && { implementation: options.rules.scss.implementation }), + ...(options.rules.scss.sassOptions && { sassOptions: options.rules.scss.sassOptions }), }; webpackConfig.module.rules.push({ test: /\.s?css$/, diff --git a/packages/project-nitro-twig/config/webpack/options.js b/packages/project-nitro-twig/config/webpack/options.js index e927effe..3aa06ef1 100644 --- a/packages/project-nitro-twig/config/webpack/options.js +++ b/packages/project-nitro-twig/config/webpack/options.js @@ -3,7 +3,12 @@ const options = { rules: { js: true, ts: false, - scss: true, + scss: { + sassOptions: { + quietDeps: true, + silenceDeprecations: ['color-functions', 'global-builtin', 'import', 'legacy-js-api'], + }, + }, hbs: true, woff: true, image: true, diff --git a/packages/project-nitro-twig/project/docs/nitro-webpack.md b/packages/project-nitro-twig/project/docs/nitro-webpack.md index ac90edd7..6d833421 100644 --- a/packages/project-nitro-twig/project/docs/nitro-webpack.md +++ b/packages/project-nitro-twig/project/docs/nitro-webpack.md @@ -71,8 +71,9 @@ Config: Config: - `true` or `{}` will activate scss support -- `{ stylelint: true }` additionally adds stylelint live linting feature (only relevant for development build) - `{ publicPath: '../' }` provide a separate public path for stylesheets. By default, webpack uses the value from 'output.publicPath'. (only relevant for production build) +- `{ implementation: require('node-sass') }` gives the possibility to use 'node-sass' as sass implementation. (you have to add 'node-sass' as a dev-dependency in your project) +- `{ sassOptions: { ... } }` gives the possibility to add options for the ['dart-sass'](https://sass-lang.com/documentation/js-api/interfaces/options/) or ['node-sass'](https://github.com/sass/node-sass/#options) implementation (e.g. ignore some deprecations for dart-sass with `silenceDeprecations: [...]`) #### `options.rules.hbs` @@ -82,7 +83,7 @@ Config: Config: -- `true` or `{}` will activate handlebars handlebars precompiled templates support +- `true` or `{}` will activate handlebars precompiled templates support - `{ include: [] }` additionally adds include config to rule - `{ exclude: [] }` additionally adds exclude config to rule diff --git a/packages/project-nitro-typescript/config/webpack/options.js b/packages/project-nitro-typescript/config/webpack/options.js index 242853a4..bc3ec149 100644 --- a/packages/project-nitro-typescript/config/webpack/options.js +++ b/packages/project-nitro-typescript/config/webpack/options.js @@ -3,7 +3,12 @@ const options = { rules: { js: false, ts: true, - scss: true, + scss: { + sassOptions: { + quietDeps: true, + silenceDeprecations: ['color-functions', 'global-builtin', 'import', 'legacy-js-api'], + }, + }, hbs: true, woff: true, image: true, diff --git a/packages/project-nitro-typescript/project/docs/nitro-webpack.md b/packages/project-nitro-typescript/project/docs/nitro-webpack.md index ac90edd7..6d833421 100644 --- a/packages/project-nitro-typescript/project/docs/nitro-webpack.md +++ b/packages/project-nitro-typescript/project/docs/nitro-webpack.md @@ -71,8 +71,9 @@ Config: Config: - `true` or `{}` will activate scss support -- `{ stylelint: true }` additionally adds stylelint live linting feature (only relevant for development build) - `{ publicPath: '../' }` provide a separate public path for stylesheets. By default, webpack uses the value from 'output.publicPath'. (only relevant for production build) +- `{ implementation: require('node-sass') }` gives the possibility to use 'node-sass' as sass implementation. (you have to add 'node-sass' as a dev-dependency in your project) +- `{ sassOptions: { ... } }` gives the possibility to add options for the ['dart-sass'](https://sass-lang.com/documentation/js-api/interfaces/options/) or ['node-sass'](https://github.com/sass/node-sass/#options) implementation (e.g. ignore some deprecations for dart-sass with `silenceDeprecations: [...]`) #### `options.rules.hbs` @@ -82,7 +83,7 @@ Config: Config: -- `true` or `{}` will activate handlebars handlebars precompiled templates support +- `true` or `{}` will activate handlebars precompiled templates support - `{ include: [] }` additionally adds include config to rule - `{ exclude: [] }` additionally adds exclude config to rule diff --git a/packages/project-nitro/project/docs/nitro-webpack.md b/packages/project-nitro/project/docs/nitro-webpack.md index ac90edd7..6d833421 100644 --- a/packages/project-nitro/project/docs/nitro-webpack.md +++ b/packages/project-nitro/project/docs/nitro-webpack.md @@ -71,8 +71,9 @@ Config: Config: - `true` or `{}` will activate scss support -- `{ stylelint: true }` additionally adds stylelint live linting feature (only relevant for development build) - `{ publicPath: '../' }` provide a separate public path for stylesheets. By default, webpack uses the value from 'output.publicPath'. (only relevant for production build) +- `{ implementation: require('node-sass') }` gives the possibility to use 'node-sass' as sass implementation. (you have to add 'node-sass' as a dev-dependency in your project) +- `{ sassOptions: { ... } }` gives the possibility to add options for the ['dart-sass'](https://sass-lang.com/documentation/js-api/interfaces/options/) or ['node-sass'](https://github.com/sass/node-sass/#options) implementation (e.g. ignore some deprecations for dart-sass with `silenceDeprecations: [...]`) #### `options.rules.hbs` @@ -82,7 +83,7 @@ Config: Config: -- `true` or `{}` will activate handlebars handlebars precompiled templates support +- `true` or `{}` will activate handlebars precompiled templates support - `{ include: [] }` additionally adds include config to rule - `{ exclude: [] }` additionally adds exclude config to rule