Not working?

[MaartenvanSpil]

Can't seem to get this to work with Webpack 3.3.0, it keeps saying File to import not found or unreadable: ./bike-components/**/*.scss. I have a styles.scss file, in which i import 'bike-components/**/*.scss. Folders are as follows:

• src
  • styles
    • styles.scss
    • bike_components
      • file_a.scss
      • file_b.scss

`
var path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
filename: "[name].css",
disable: process.env.NODE_ENV === "development"
});

module.exports = {
entry: {
a: "./src/script/main.js",
styles: "./src/styles/styles.scss",
},
output: {
path: path.join(__dirname, "site/dist"),
filename: "[name].entry.js"
},
module: {
rules: [{
test: /.scss/,
enforce: "pre",
loader: "import-glob-loader",
},
{
test: /.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader", options: {
sourceMap: true,
minimize: true,
importLoaders: 2,
}
}, {
loader: "sass-loader",
options: {
includePaths: [
"src/styles",
"node_modules/foundation-sites/scss",
"node_modules/slick-carousel/slick",
],
sourceMap: true,
minimize: true,
importLoaders: 2,
}
}],
// use style-loader in development
fallback: "style-loader",
})
}]
},
plugins: [
extractSass
]
};
`

[bensgroi]

Same problem here. wepback 3.6.0

[ghost]

+1

[jspencersharpe]

+1

[ghost]

+1

[ymc-sise]

+1 Webpack 3.8.1

[chrishough]

I just got this to work in my setup, here is my webpack config...

"use strict";

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ManifestPlugin = require("webpack-manifest-plugin");
const outputPath = path.join(__dirname, "build/assets");

{{insert-webpack-plugins}}

const siteConfig = {
  entry: {
    vendor: [
      path.join(__dirname, "/source/assets/javascripts/vendor.js")
    ],
    site: [
      path.join(__dirname, "/source/assets/javascripts/site.js"),
      path.join(__dirname, "/source/assets/stylesheets/site.scss")
    ]
  },

  output: {
    path: outputPath,
    filename: "site-[hash].js"
  },

  resolve: {
    modules: [
      "node_modules",
      "source/assets/javascripts/vendor"
    ],
    alias: {
      "fontawesome": "fontawesome",
      "jquery": "jquery/src/jquery.js",
      "popper": "popper.js/dist/popper.js",
      "bootstrap": "bootstrap/dist/js/bootstrap.js"
    }
  },

  module: {
    rules: [
      {
        test: /\.html$/,
        exclude: /(assets)/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true,
              removeComments: false,
              collapseWhitespace: false,
              name: "[name]-[hash].[ext]",
              publicPath: "/assets/"
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg|ico|jpg|jpeg|png)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 5000,
              name: "[name]-[hash].[ext]",
              publicPath: "/assets/"
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"]
            }
          }
        ]
      },
      {
        test: /.scss/,
        enforce: "pre",
        loader: "import-glob-loader"
      },
      {
        test: /\.(css|scss)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name]-[hash].css",
              publicPath: "/assets/"
            }
          },
          {
            loader: "extract-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: function () {
                return [
                  require("autoprefixer")
                ];
              }
            }
          },
          {
            loader: "resolve-url-loader"
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: [
                path.resolve(__dirname, "node_modules")
              ]
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      filename: "site-vendor-[hash].js",
      minChunks: Infinity
    }),
    new ManifestPlugin({
      fileName: "site-manifest.json"
    }),
    new CleanWebpackPlugin([outputPath], {
      root: __dirname,
      verbose: false
    }){{insert-webpack-plugin-merges}}
  ]
};

module.exports = [siteConfig]

[Epho]

+1 Not working for me in webpack 3.8.1
Tried adjusting config based on @chrishough 's suggestion but no dice

[wuyechang]

I met this problem and solved it.
Maybe the cause is the way you import your scss files.

Before reading below, make sure import-glob-loader is executed before sass-loader.

My folders are as follows:

.
├── config
├── src
│   ├── App.jsx
│   ├── App.scss
│   ├── home
│   │   ├──_home.scss
│   │   ├──component1
│   │   │   └──_index.scss
│   │   ├──component2
│   │   │   └──_index.scss

I want to import all _index.scss files in home. At first I wrote it this way:

App.jsx

import './App.scss';

App.scss

@import 'home/_home.scss';

_home.scss

@import './**/_index.scss';

Then I met the same error: File to import not found or unreadable: ./**/_index.scss

I did some debugging and found that the _home.scss file is not parsed by import-glob-loader at all. At the same time, App.scss is parsed by it.

I am not familiar with webpack. I guess that only scss files which are imported by jsx files directly are parsed by import-glob-loader.

Then I changed it this way:

App.jsx

import './App.scss';

App.scss

@import 'home/_home.scss';
@import 'home/**/_index.scss';

_home.scss

// import nothing

Well, it worked.