maoberlehner / node-sass-magic-importer

Custom node-sass importer for selector specific imports, module importing, globbing support and importing files only once.
MIT License
292 stars 28 forks source link

node-sass-glob-importer - Example Needs Update for webpack 4.x and Node SASS 4.12: "ValidationError: Invalid options object." #211

Open GuyPaddock opened 4 years ago

GuyPaddock commented 4 years ago

On webpack 4.20 with Node SASS 4.12, if I use this configuration syntax from the README:

// webpack.config.js
const globImporter = require('node-sass-glob-importer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract([
          {
            loader: 'css-loader'
          }, {
            loader: 'sass-loader',
            options: {
              importer: globImporter()
            }
          }
        ])
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'style.css'
    })
  ]
}

... I get this error:

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

This syntax (moving importer under sassOptions) works:

// webpack.config.js
const globImporter = require('node-sass-glob-importer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract([
          {
            loader: 'css-loader'
          }, {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                importer: globImporter()
              }
            }
          }
        ])
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'style.css'
    })
  ]
}
maslade commented 3 years ago

Hey @GuyPaddock , small world :) I'm running into the same problem and curious if you ever found a solution or alternative. I'm supporting vendor SASS so rewriting the globs out isn't an option for me.

maslade commented 3 years ago

Looks like this passes option validation, but in my case still reporting "File to import not found or unreadable" when it reaches a glob import.

options: {
  sassOptions: {
    importer: globImporter(),
  }
}