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

[coryhouse]

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

[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 😓

[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