webpack: Webpack @import sass error

Hi, I’m not sure if this is a bug in webpack or a defined loader (ExtractTextPlugin, …). I’m also not sure if this is the right place to ask, but the error/behavior is quite strange and after several hours en various config trials i always end up with the same error:

ModuleBuildError: Module build failed: @import ‘path/to/my/_partial.scss’; File to import not found or unreadable …

Whenever i do a first run with 'npm run dev ’ and the below configurations everything builds fine and all .scss files are compiled nicely into one .css file in the correct folder. But when i modify or add some scss markup in one of the scss files the above error is thrown. But, and this is the strange part, when i save again without modifications the build passes again and in most cases the console does not show a build log but the css is rebuild correctly. At first I was looking for wrong path configurations, but the first run builds correctly so the files are found… . I’ve been searching quite a while for a solution but didn’t find anything, Below my installed packages, webpack config and folder structure

My installed packages are: "scripts": { "dev": "set NODE_ENV=development && webpack --watch" } "webpack": "^2.1.0-beta.22" "resolve-url": "^0.2.1", "resolve-url-loader": "^1.6.1", "sass-loader": "^4.0.2", "style-loader": "^0.13.1", "css-loader": "^0.23.1", "node-sass": "^4.0.0", "extract-text-webpack-plugin": "^2.0.0-beta.4", "file-loader": "^0.9.0", "glob": "^7.1.1", "node-sass": "^4.0.0", "path": "^0.12.7", "postcss-cssnext": "^2.9.0", "postcss-import": "^9.0.0", "postcss-loader": "^1.2.1", "autoprefixer-loader": "^3.2.0",

My webpack.config.js is quite simple and is as follows:

    entry: {
        styles: ['app.scss'],
    },

    output: {
        filename: '[name].css',
        path: __dirname + '/app/styles'
    },

    resolve: {
        modules: [
            path.resolve(__dirname, 'dev'),
            'node_modules'
        ],
        extensions: ['', '.css', '.scss', '.sass']
    },

    module: {
        loaders: [

            // SASS
            {
                test: /\.scss$/,
                loader: extractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]!resolve-url!sass-loader?sourceMap"
                })
            }
        ]
    },
    
    plugins: [
        new extractTextPlugin({ filename: '[name].css', allChunks: true })
    ]
}

The folder structure contains one app.scss file in the root ./dev from where alle other .scss files are included:

@import 'assets/styles/_variables.scss';
@import 'assets/styles/_mixins.scss';

@import 'assets/styles/_base.scss';
@import 'assets/styles/_motion.scss';

@import 'components/form/UiButton/_UiButton.scss';
@import 'components/router/UiSideBar/_SideBar.scss';
@import 'components/router/UiTopMenu/_TopMenu.scss';
@import 'components/router/UiSubMenu/_SubMenu.scss';
@import 'components/router/UiToolBar/_ToolBar.scss';
@import 'components/popup/UiModal/_UiModal.scss';
@import 'components/media/UiSpinner/_UiSpinner.scss';

so the first build always succeeds, the next builds throw an error like above mentioned but succeed after double save without modifications. Has anyone encountered this problem/behavior? Or is this a wrong configuration?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 6
Comments: 19 (7 by maintainers)

Most upvoted comments

@artnova-david

Because you are using the new version of extract-text-webpack-plugin “^2.0.0-beta.4” Need to be modified into this way:

before:

{
    test : /\.scss$/,
    exclude: /node_modules/,
    loader: extractTextPlugin.extract(['css-loader', 'sass-loader'])
}

after:

{
    test : /\.scss$/,
    exclude: /node_modules/,
    loader: extractTextPlugin.extract({
        loader: ['css-loader', 'sass-loader']
    })
}

See details : https://github.com/webpack/extract-text-webpack-plugin#usage-example-with-css

xyyjk on Jan 4, 2017