sass-resources-loader: @import error - File to import not found or unreadable...

When the SCSS file has @import ‘bourbon/bourbon’; It’s throwing an error, “File to import not found or unreadable: bourbon/bourbon”

Do I need to specify each and every file bourbon imports in the sassResources array from webpack configuration?

in webpack.dev.js

var sassLoaders = [
  'style-loader',
  'css-loader?sourceMap',
  'sass-loader',
  'sass-resources'
];

....

  sassResources: [
    path.resolve(projectBase, 'lib/client/assets/styles/app.scss')
  ],

In app.scss I have,

@import 'bourbon/bourbon';
@import 'base/base';
@import 'helpers/helpers';
@import 'layout/neat/neat';

sass-resources-loader is unable to resolve any of the above imports

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 10
Comments: 15 (5 by maintainers)

Most upvoted comments

For those who still want this to work, and what I ended up doing,

Add the following prop to webpack config, var sassResources = require('./sass-resources'); sassResources: sassResources,

and then…

In sass-resources.js, module.exports = [ // Bourbon 4.2.6 // http://bourbon.io // Copyright 2011-2015 thoughtbot, inc. // MIT License "./lib/client/assets/styles/bourbon/settings/_prefixer.scss", "./lib/client/assets/styles/bourbon/settings/_px-to-em.scss", "./lib/client/assets/styles/bourbon/settings/_asset-pipeline.scss", .... ];

veeracs on May 6, 2016

👍

@justin808 I want to use Foundation with Webpack but the lack of support for the @import syntax in a base SCSS file makes this unviable i.e. I’d have to add a direct link to every single mixin file.

I want to:

npm install foundation-sites

This will be included globally in my app but I would like access in my modules to Foundation mixins/variables e.g.

@include flex-grid-column(12)

In the webpack config:

sassResources: [ './node_modules/foundation-sites/scss/foundation.scss' ]

Unfortunately this does not work because the foundation.scss file @imports all the mixins recursively across separate files.

Great module but would love the @import syntax supported!

davidrossjones on Apr 27, 2016

We also find ourselves needing proper support for @import statements. Because of the nature of this module we cannot use relative paths, and absolute paths is not an option for us.

@elishaterada @veeracs @justin808

mirague on Apr 22, 2016

+1 for automatically handling @import statement within the resource file to load additional resources.

This is extremely useful with using frameworks like Bootstrap that splits mixins into over 30 files.

Or at least a way to use glob like syntax to specify all mixin files in a directory and such.

elishaterada on Mar 7, 2016

@justin808 Due to project related changes we moved to another setup, therefore I don’t face this use case / scenario anymore

diegodurli on Aug 16, 2016

Hello, thanks for an awesome plugin. Possibility to correctly handle of @impot will be also very valuable for my project.

May be its possible to teach saas-resourse-loader understand patterns-matching like:

sassResources: {
  files: {
    bourbon: ['path_to_bourbon/**/*.sass', '!_bourbon.sass'],
    myVars: 'styles/vars/*.sass'
  }
}

vict-shevchenko on Jul 20, 2016

Hi guys!

First of all, this is a great loader, helps a lot! My scenario is the following:

I was attempting to use some bourbon mixins within my css-modules files, as @veeracs mentioned. I thought that it would be hard to explicitly define all paths to Bourbon, therefore I created this small piece of code to load based on patterns:

However, now I faced another problem: I’ve tried to add resources for breakpoint-sass, but these files use @import inside of it, therefore this loader is not able to resolve that.

Do you have any workaround for this situation?

I’ve tried to define all breakpoint-sass mixins files individually but it did not work as well.

diegodurli on May 12, 2016