Something wrong with provided resources

[andrewmartin]

Hi there, looking forward to getting this loader in action!

I'm hitting a strange error with a pretty basic setup, and I dug through the issues but couldn't find anything relevant. Apologies if this has been addressed.

I'm seeing this error:

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

Here's my snippet from module.rules in my webpack config:

    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          query: {
            presets: ['react', ['es2015', { modules: false }], 'stage-0'],
            plugins: ['react-hot-loader/babel']
          },
          include: path.join(__dirname, 'src')
        },
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'style-loader', options: {
                sourceMap: true
              }
            },
            {
              loader: 'css-loader',
              options: {
                localIdentName: '[hash:base64:4]',
                importLoaders: 1,
                sourceMap: true,
                modules: true
              }
            },
            {
              loader: 'postcss-loader', options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
                includePaths: [
                  path.join(__dirname, 'src')
                ]
              }
            },
            {
              loader: 'sass-resources-loader',
              options: {
                resources: './src/modules/shared/resources.scss'
              }
            }
          ]
        }
      ]
    },

I've tried using path.join to define my path as well. Any idea what I might be missing? Thanks in advance.

[andrewmartin]

Quick update here. So, I actually got things working (issue with my path), but I'm hitting another strange error, and was curious if you could chime in or have seen this before.

In my resources.scss, I'm importing another file, variables.scss, which exists in the same directory.

However, when I import it, it chokes and says File to import not found or unreadable: variables..

I'm thinking I can solve this by simply using an array option in the sass-resources-loader and include the said file, but is there a known conflict or issue here due to the fact that I'm setting an includePaths option on the sass-loader?

Thanks in advance for taking a look and for all of your work on this loader. It's going to save a lot of boilerplate!

[justin808]

@andrewmartin Any updates?

[andrewmartin]

@justin808

So, I ended up using the option in the sass-resources-loader config. I'm not sure there's a way around this, I'm guessing there's something wonky with where this loader is looking for includePaths in the SASS. I guess when in doubt, it's best to not @import in the actual resources file, and instead just define it at the webpack config level.

I'll close this for now.

[Igor-Vuk]

I am also hitting this problem. I am importing _variables.scss file from Bootstrap and when I use @import "node_modules/bootstrap/scss/_variables" inside sass-resources.scss file it works great but when I use it inside webpack-config resources i get modul built failed. It can not find it. I would leave it as it is but documentation suggest not to use @import inside resources file but better to put it in array inside webpack-config.

 loader: 'sass-resources-loader',
 options: {
   resources: [
     path.resolve(__dirname, './node_modules/bootstrap/scss/_variables'),
     path.resolve(__dirname, './src/client/styles/global/sass-resources.scss')
   ]

EDIT
Never mind. The moment I posted I saw stupid mistake on my part. I didn’t put _variables.scss but just used copy from import where I don’t need extension.

EDIT 2
Ok. I hit another ERROR. I tried to add mixins but I get File to import not found or unreadable: mixins/breakpoints.

{
  loader: 'sass-resources-loader',
  options: {
    resources: [
      path.resolve(__dirname, './node_modules/bootstrap/scss/_variables.scss'),
      path.resolve(__dirname, './node_modules/bootstrap/scss/_mixins.scss'),
      path.resolve(__dirname, './src/client/styles/global/sass-resources.scss')
    ]
  }
}

I am guessing this is because of _mixins.scss file that only has @imports inside to other mixins and it can not be processed. Does that mean I need to import one by one mixin?

[andrewmartin]

@Igor-Vuk

Out of curiosity, were you able to @import 'some_file_relative_to_resources.scss';?

[Igor-Vuk]

Hi @andrewmartin , I just tried it but I couldn't do it. It is probably related to my second EDIT in post. Same problem.

[mmase]

Has anyone found a way to successfully import files into resource files?

[andrewmartin]

@mmase

The best solution I've found that isn't really much of a major issue, is to add them into the webpack config, something like the example above, but probably even better using path.resolve:

{
  loader: 'sass-resources-loader',
  options: {
    resources: [
      path.resolve(__dirname, 'src/modules/Shared/variables.scss'),
      path.resolve(__dirname, 'src/modules/Shared/resources.scss')
    ]
  }
}

It'd be nice if this were added in the docs; @justin808 what do you think? I wouldn't mind submitting a PR if you deem worthy.

[justin808]

@mmase, are these instructions good with Webpack 2/3?

Let's see what @alexfedoseev thinks about adding this to the docs.

[alex35mil]

Hey everybody, I just merged and published #34. It should solve this issue, but keep in mind @imports in SCSS files w/ resources (instead of an array of paths in config) slow down incremental builds, so watch out.