data option no longer supported in sassOptions

[Smolations]

• Operating System: OSX Mojave 10.14.6
• Node Version: 10.15.1
• NPM Version: 6.4.1
• webpack Version: 4.40.2
• sass-loader Version: 8.0.0
• node-sass Version: 4.12.0

NOTE: This is a completely bare-bones project I just started, so there should be no complex configurations conflicting behind the scenes.

Expected Behavior

When setting:

options: {
  sassOptions: {
    data: 'import "blah";',
    includePaths: [ ... ],
  },
},

I would expect the "blah" module (which only contains variable definitions) to be compiled in front of any .scss which I have imported into a component.

Actual Behavior

In my webpack config, the data property seems to not be honored. I know this because I get an error (SassError: Undefined variable: "$Nav-width".) when I start the server and the initial compilation takes place. I jumped into node_modules/sass-loader/dist/getSassOptions.js and added some log statements to see what was happening. 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,
  sourceMapContents: true,
  indentedSyntax: false,
  importer: [] }
loaderOptions { sassOptions:
   { data: '@import "noop";',
     includePaths: [ '/Volumes/projects/storybook/src/sass-noop' ] } }
options { data: '.Stage {}\n',
  includePaths:
   [ '/Volumes/projects/storybook/src/sass-noop',
     '/Volumes/projects/storybook/src/storybook/components/Stage' ],
  sourceMap: '/Volumes/projects/storybook/sass.map',
  sourceMapRoot: '/Volumes/projects/storybook',
  omitSourceMapUrl: true,
  sourceMapContents: true,
  indentedSyntax: false,
  importer: [] }
loaderOptions { sassOptions:
   { data: '@import "noop";',
     includePaths: [ '/Volumes/projects/storybook/src/sass-noop' ] } }
options { data: '.Toolbox {}\n',
  includePaths:
   [ '/Volumes/projects/storybook/src/sass-noop',
     '/Volumes/projects/storybook/src/storybook/components/Toolbox' ],
  sourceMap: '/Volumes/projects/storybook/sass.map',
  sourceMapRoot: '/Volumes/projects/storybook',
  omitSourceMapUrl: true,
  sourceMapContents: true,
  indentedSyntax: false,
  importer: [] }
loaderOptions { sassOptions:
   { data: '@import "noop";',
     includePaths: [ '/Volumes/projects/storybook/src/sass-noop' ] } }
options { data:
   '.Nav {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: $Nav-width;\n\n  background-color: $green;\n}\n',
  includePaths:
   [ '/Volumes/projects/storybook/src/sass-noop',
     '/Volumes/projects/storybook/src/storybook/components/Nav' ],
  sourceMap: '/Volumes/projects/storybook/sass.map',
  sourceMapRoot: '/Volumes/projects/storybook',
  omitSourceMapUrl: true,
  sourceMapContents: true,
  indentedSyntax: false,
  importer: [] }

You can see that my options are being honored in loaderOptions but the new options object to be returned replaces that property with the contents of each component's .scss file. I should also say here that I am using the exact same setup in another project, but with older syntax (i.e. no sassOptions object) to support less-recent versions:

• "node-sass": "4.12.0",
• "sass-loader": "7.1.0",
• "webpack": "4.29.5",

Code

Note that I'm trying to import the existing file: ${__dirname}/src/sass-noop/_noop.scss

// webpack.config.js (snippet)
      {
        test: /\.scss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                data: '@import "noop";',
                includePaths: [
                  path.join(__dirname, 'src', 'sass-noop'), 
                ],
              },
            },
          },
        ],
      },

How Do We Reproduce?

Just try using the data property to import some variables ahead of each sass file imported within components.

I even tried putting in invalid paths in the webpack config as well as syntax errors in the sass files to be imported, but nothing throws. This indicates to me that the data option is simply never being processed.

[Smolations]

Ack, of course I decided to look at the CHANGELOG after posting this issue. 🙈

So I see that:

the data option was renamed to the prependData option
in v8.

However, the README does not indicate this clearly as it just points people to the node-sass and dart-sass libs, with the former still claiming support for the data option. So perhaps this is less a bug and more a documentation request? 😁

[yairEO]

I want to point that v8 CHANGELOG is very unclear. My webpack breaks and I'm trying to figure out what changes are needed to fix it...

{
    test: /\.(sass|scss)$/,
    use: [
        'style-loader',
        'css-loader',
        {
            loader: 'sass-loader',
            options: {
                includePaths: [path.resolve(__dirname, 'node_modules')],
            },
        },
    ],
    include: path.resolve(__dirname, '../'),
}

[Smolations]

@yairEO Did you try this:

{
    test: /\.(sass|scss)$/,
    use: [
        'style-loader',
        'css-loader',
        {
            loader: 'sass-loader',
            options: {
                sassOptions: {
                  includePaths: [path.resolve(__dirname, 'node_modules')],
                },
            },
        },
    ],
    include: path.resolve(__dirname, '../'),
}

[alexander-akait]

The data option for sassOptions is not supported, because it is used inside sass-loader and can't available for developers, please use prependData.

You can send a PR to CHANGELOG if something misleading for you