sass-loader sassoptions

github.com › webpack-contrib › sass-loader › issues › 760

`data` option no longer supported in `sassOptions` · Issue #760 ...

August 4, 2019 - The first log was for loaderOptions while the second is for options, as shown here when i started the webpack-dev-server (note that there are 4 components importing their own sass styles): loaderOptions { sassOptions: { data: '@import "noop";', includePaths: [ '/Volumes/projects/storybook/src/sass-noop' ] } } options { data: '.App {\n\n}\n', includePaths: [ '/Volumes/projects/storybook/src/sass-noop', '/Volumes/projects/storybook/src/storybook/components' ], sourceMap: '/Volumes/projects/storybook/sass.map', sourceMapRoot: '/Volumes/projects/storybook', omitSourceMapUrl: true, sourceMapContent

Author Smolations

stackoverflow.com › questions › 75525246 › how-do-i-use-loadpath-with-sass-loader-and-webpack

How do I use loadPath with sass-loader and webpack? - Stack Overflow

1 of 1

Strangely, the loadPaths attribute doesn't work, what worked for me was using includePaths:

                {
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            includePaths: [path.resolve(__dirname, 'Develop', 'Styles')]
                        }
                    }
                }

github.com › webpack-contrib › sass-loader

GitHub - webpack/sass-loader: Compiles Sass to CSS · GitHub

Starred by 3.9K users

Forked by 428 users

Languages JavaScript 80.2% | SCSS 8.9% | Sass 8.8% | HTML 1.8% | CSS 0.3%

Vue Loader

vue-loader.vuejs.org › guide › pre-processors.html

Using Pre-Processors | Vue Loader

// webpack.config.js -> module.rules { test: /\.sass$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { indentedSyntax: true, // sass-loader version >= 8 sassOptions: { indentedSyntax: true } } } ] } sass-loader also supports a additionalData option which allows you to share common variables among all processed files without having to explicit import them: // webpack.config.js -> module.rules { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { // you can also read from a file, e.g.

github.com › webpack-contrib › sass-loader › blob › master › src › options.json

sass-loader/src/options.json at main · webpack/sass-loader

"description": "Switch between old and modern API for `sass` (`Dart Sass`) and `Sass Embedded` implementations.",

Author webpack

github.com › vitejs › vite › discussions › 4013

How to set sassOptions? · vitejs/vite · Discussion #4013

Author vitejs

openbase.com › js › sass-loader › versions

1 of 1

It works fine for me, like this:

css: {
    preprocessorOptions: {
        scss: {
            quietDeps: true
        },
    }
},

Openbase

sass-loader: Versions | Openbase

move all sass (includePaths, importer, functions) options to the sassOptions option.

Find elsewhere

Google Bing Mojeek

stackoverflow.com › questions › 70530451 › nextjs-use-sass-loader-to-add-variables-to-every-scss-file

NextJS - Use sass-loader to add variables to every scss file

competent-wiles-ed53ea.netlify.app › loaders › sass-loader

1 of 1

We can directly add sassOptions in next.config.js without sass-loader.

sassOptions: {
    additionalData: `@import "src/styles/variables.scss"; @import "src/styles/mixins.scss";`,
 },

Netlify

sass-loader

Loads a SASS/SCSS file and compiles it to CSS. Use the css-loader or the raw-loader to turn it into a JS module and the ExtractTextPlugin to extract it into a separate file. Looking for the webpack 1 loader?

DEV Community

dev.to › deepanjangh › setting-up-css-and-sass-with-webpack-3cg

Setting up CSS and Sass with Webpack!! - DEV Community

November 20, 2022 - This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use." Essentially this loader has internal dependencies which require node-sass.

Sass

sass-lang.com › documentation › js-api › interfaces › options

Sass: Options | JS API

Options that can be passed to compile, compileAsync, compileString, or compileStringAsync · This lets the TypeScript checker verify that asynchronous Importers, FileImporters, and CustomFunctions aren't passed to compile or compileString

Robin Wieruch

robinwieruch.de › webpack-sass

How to SASS with Webpack 5 - Setup Tutorial

If you happen to have a custom Webpack setup, you may be wondering how to set up SASS with Webpack. This short tutorial walks you through the process. First of all, you need to install a SASS loader and a SASS to your dev dependencies:

github.com › webpack-contrib › sass-loader › releases

Releases · webpack/sass-loader

Legacy options - https://sass-lang.com/documentation/js-api/interfaces/legacystringoptions/ Modern options - https://sass-lang.com/documentation/js-api/interfaces/options/ ... module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ "style-loader", "css-loader", { loader: "sass-loader", options: { api: "legacy", // Your options }, }, ], }, ], }, };

Author webpack

stackoverflow.com › questions › 58184549 › sass-loader-error-invalid-options-object-that-does-not-match-the-api-schema

node.js - Sass Loader Error: Invalid options object that does not match the API schema - Stack Overflow

1 of 11

121

Seems same issue like here: https://github.com/JeffreyWay/laravel-mix/issues/2206

Solution is

npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

2 of 11

Problem

Based on vue-cli - github issue, If you did upgrade your sass-loader from v7 to 8 or 9, You may have faced with the validation-error for invalid options :

vue.config.js(valid syntax for sass-loaderv7 in webpack)

  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/variables/index.scss";`
      }
    }
  }

errors

object:
    ValidationError: Invalid options object. Sass Loader has been
    initialized using an options object that does not match the API schema.
      - options has an unknown property 'data'. These properties are valid:

sass-loader v8.0 Breaking Changes

You should know that v8. has below breaking changes

minimum required webpack version is 4.36.0
minimum required node.js version is 8.9.0
move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this.
the data option was renamed to the prependData option default value of the sourceMap option depends on the devtool value (eval/false values don't enable source map generation)

Solution v8

As the docs says:

move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this.
the data option was renamed to the prependData option

sass-loader v9.0 Breaking Changes

You should know that v9. has below breaking changes

BREAKING CHANGES minimum supported Nodejs version is 10.13
prefer sass (dart-sass) by default, it is strongly recommended to migrate on sass (dart-sass)
the prependData option was removed in favor the additionalData option, see docs
when the sourceMap is true, sassOptions.sourceMap, sassOptions.sourceMapContents, sassOptions.sourceMapEmbed, sassOptions.sourceMapRoot and sassOptions.omitSourceMapUrl will be ignored.

Solution v9

In ver9 as you can see in the options, sassOption , additionalData, if we change data to additionalData it will fix the invalid options errors.

  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/variables/index.scss";`
      }
    }
  }

github.com › webpack-contrib › sass-loader › issues › 954

How to set `quietDeps` option for dart-sass · Issue #954 · ...

May 24, 2021 - const sassLoader = { loader: 'sass-loader', options: { sassOptions: { quietDeps: true, }, }, };

Published May 24, 2021

Author gcangussu

github.com › webpack › sass-loader › tree › v12.6.0

GitHub - webpack/sass-loader at v12.6.0 · GitHub

You can disable automatically injecting the fibers package by passing a false value for the sassOptions.fiber option. ... module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ "style-loader", "css-loader", { loader: "sass-loader", options: { implementation: require("sass"), sassOptions: { fiber: false, }, }, }, ], }, ], }, };

Starred by 3.9K users

Forked by 427 users

Languages JavaScript 80.2% | SCSS 8.9% | Sass 8.8% | HTML 1.8% | CSS 0.3%

UW Computer Sciences

pages.cs.wisc.edu › ~dodhia › node_modules › sass-loader › README.md

Wisc

**webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ "style-loader", "css-loader", { loader: "sass-loader", options: { sassOptions: { indentWidth: 4, includePaths: ["absolute/path/a", "absolute/path/b"], }, }, }, ], }, ], }, }; ``` #### `function` Allows to setup the Sass implementation by setting different options based on the loader context.

stackoverflow.com › questions › 68147471 › how-to-set-sassoptions-in-vite

sass - How to set sassOptions in Vite - Stack Overflow