sass-resources-loader: sassResources wrong type error

FWIW: I was just receiving this error:

Module build failed: Error:
      Something wrong with provided resources.
      Make sure 'options.resources' is String or Array of Strings.

Even though options.resources was a String (also tried with a single index array). The problem turned out to be a typo in my path (wrong file name). Please consider updating the error text as it can be quite misleading!

If this is still broken for you, use an absolute path, like so:

...
options: {
  resources: [ path.resolve(__dirname, './resources.scss') ]
}
...

glob can’t deal with relative paths, which is used to resolve paths in this loader.

Not relevant with newer Webpack.

In my case this issue is caused by sass-resources-loader ignoring webpack.options.context that allows using project relative paths in webpack.

Fixed by passing webpack.options.context in parseResourses.default, followed by doing _path.resolve(context, location) in parseResolve.js (for every file given)

Should be fixed in 1.2.0. Note about missing context also added to README. If anyone still experiences problems, please, create new issue as this one became quite messy.

Using the webpack-starter project from AngularClass (https://github.com/AngularClass/angular2-webpack-starter), I have all my ng2 components splitted into a .ts, a .html and a .scss file. In order to use mixins and constants in my scss files, I don’t want to add in all of them an "@import ‘…/…/./…/utils’ " (note the relative path constraint…) Since the sass-resources-loader is able to act as if I had included this @import line, I’m happy to use it. I’ve had difficulties to find the correct syntax on how to use it.

Finally, in the webpack.config.js file, I have :

added : config.sassResources = [‘./src/app/style/utils.scss’]; AND changed this line : {test: /.scss$/, exclude: root(‘src’, ‘style’), loader: ‘raw!postcss!sass!sass-resources’},

note that my file structure is : <root> webpack.config.js / package.json / etc… <src>\ * <-- all my ts/html/scss files <node_modules>…

@smitray : thank you

@samfrach I just went through your issue and I think you can sass-resources-loader. This works really fine. You don’t even need to import your lib in your individual scss files. Anyway, I’m not sure which framework you’re using, but I tried with TWB 3. You can follow the instructions mentioned in the following link if you’re using TWB (Please note: there are issues with TWB4 rc file, you may get few errors).

https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

Once it’s done, install sass-resources-loader, edit your webpack common config file. Here it’s the tricky part. In my case, I needed the variables.scss file to be easily accessible and so I made a copy of it and put it in config folder and the mixin.scss file is still in the node_modules folder. Now my

sassResources: ['./config/variables.scss', './node_modules/path/to/your/mixin'],

That’s pretty much it.

@justin808 I’ll try with F6 and other frameworks, over this weekend and will update here.

@justin808 finally I got this working. Actually, the issue is with the file path. As @samfrach mentioned it’s because of the glob. People who are using AngularClass starter, need to address the file path from the root folder. Like I kept my variables.scss file inside config folder so I had to mention the path as ‘./config/variables.scss’, even though the webpack common config file is inside the config folder. Also, you need to use the .bootstraprc file, I don’t know why but it didn’t work without this file.

@justin808 Unfortunately, it didn’t solve the problem. The mentioned error persists for each .scss import. 😦