@import in css files loaded via webpack results in "File to import not found or unreadable"

[harrisrobin]

Greetings, Something that use to work on other projects that did not use ExtractTextPlugin seems to not work here.

So, I have installed node-sass + node-bourbon.

Here is my loaders array:

const bourbon = require('node-bourbon').includePaths;
  if (env === productionEnvironment ) {
    // generate separate physical stylesheet for production build using ExtractTextPlugin. This provides separate caching and avoids a flash of unstyled content on load.
    loaders.push({
      test: /(\.css|\.scss)$/,
      include: path.join(__dirname, 'src'),
      loader: ExtractTextPlugin.extract("css?sourceMap!sass?outputStyle=expanded&includePaths[]=" + bourbon)
    });
  } else {
    loaders.push({
      test: /(\.css|\.scss)$/,
      include: path.join(__dirname, 'src'),
      loaders: ['style', 'css?sourceMap', 'sass?outputStyle=expanded&includePaths[]=' + bourbon]
    });
  }

and in styles.scss, I import bourbon globally as i normally would: @import 'bourbon'; However, this results in the following error:

@import 'bourbon';

      File to import not found or unreadable: bourbon
Parent style sheet: stdin
      in /Users/sirrah/Koding/work/thirdshelf/loyalty-grader/src/styles/styles.scss (line 2, column 1)
Error: 

@import 'bourbon';

      File to import not found or unreadable: bourbon
 Parent style sheet: stdin
       in /Users/sirrah/Koding/work/thirdshelf/loyalty-grader/src/styles/styles.scss (line 2, column 1)
     at options.error (/Users/sirrah/Koding/work/thirdshelf/loyalty-grader/node_modules/node-sass/lib/index.js:277:32)
  @ ./src/styles/styles.scss 4:14-280 13:2-17:4 14:20-286

This use to work fine, however I believe that in this case it is because of ExtractTextPlugin since it is the only difference between me doing this on previous projects and this one.

Any ideas?

[coryhouse]

Does it work fine with npm start?

I ask because that behavior hasn't changed.

Only npm run build uses the ExtractTextPlugin to generate a separate CSS file.

[harrisrobin]

hey @coryhouse yes it does. I believe there might be a problem with the way im doing it (sorry, im new to webpack). In contrast, here is a version that works in my other projects using webpack:

{ test: /\.scss$/, loader: "style!css!sass?includePaths[]=" + bourbon}, But im not sure how to do it with ExtractTextPlugin. I'll try a few things later this week and report back, so far I have simply included bourbon in the styles folder and important it manually, but would be way better to have it globally and simply use @import 'bourbon'

[coryhouse]

Yesterday I coincidentally hit the same wall. On a separate project I'm trying to get @import to work within a CSS file that I'm loading via Webpack. Let me know if/when you have any luck, and I'll do the same.

[darcnite3000]

I did some googling on the web and found

const sassPaths = bourbon
  .includePaths
  .map((sassPath)=>`includePaths[]=${sassPath}`)
  .join('&');

and

const sassPaths = bourbon
  .with([
    path.resolve(__dirname,'./src/styles')
  ])
  .map((sassPath)=>`includePaths[]=${sassPath}`)
  .join('&');

this type of code. which on my testing seemed to work.

thus the loaders were

if(env === productionEnvironment){
    loaders.push({
      test: /(\.css|\.scss)$/,
      include: path.join(__dirname, 'src'),
      loader: ExtractTextPlugin.extract(`css?sourceMap!postcss!sass?sourceMap&${sassPaths}`)
    });
  }else{
    loaders.push({
      test: /(\.css|\.scss)$/,
      include: path.join(__dirname, 'src'),
      loaders: ['style', 'css?sourceMap', 'postcss', `sass?sourceMap&${sassPaths}`]
    });
  }

[harrisrobin]

@darcnite3000 that solution worked for me. Thanks!

[superkat64]

Hey hey! Do we happen to have the solution for configuring webpack to use MiniCssExtractPlugin now that Webpack 4 doesn't use ExtractTextPlugin anymore. I've been tinkering with my app and also have been receiving the same File to import not found or unreadable: stylesheets/variables error.

Currently, this is the only change I've made:

plugins: [
    // .. the other plugins
    new MiniCssExtractPlugin()
  ],
  module: {
    rules: [
      {
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [require('autoprefixer')],
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [path.resolve(__dirname, 'src', 'scss')],
              sourceMap: true
            }
          }
        ]
      },

I appreciate any help, webpack is still foreign territory for me but I'm trying to get more familiar with it. Will keep googling in the meantime

[coryhouse]

@superkat64 - That's already configured in master. https://github.com/coryhouse/react-slingshot/blob/master/webpack.config.prod.js#L129

[superkat64]

@coryhouse Thank you so much! I must have removed it trying to figure it all out on accident or I'm just blind. Really appreciate the quick response

Edit: I was looking at the wrong config file the whole time 😓