postcss-import: Cannot import resolved path

i have postcss-import configured and here is my resolved part in webpack.config.js.

resolve: {
        root: path.resolve(__dirname),
        alias: {
            components: path.resolve(__dirname+'/src/components'),
            layouts: path.resolve(__dirname+'/src/layouts'),
            styles: path.resolve(__dirname+'/src/styles')
            //vendor: path.resolve(__dirname+'/frontend/vendor'),
            //modules: path.resolve(__dirname+'/frontend/modules')
        },
        extensions: ['', '.js', '.png']
    }

When i try to import resolved path in some .css files like this

@import "styles/colors.scss"; // also tried @import "~styles/colors.scss";

.inputField {
    input {
        height: 36px;
        border: 1px solid $gray;
    }
}

I’m getting this error

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/components/input/styles/touchbank.scss
Module build failed: Error: ENOENT: no such file or directory, open 'C:\Projects\TouchBank\src\components\input\styles\styles\colors.scss'
    at Error (native)
 @ ./src/components/input/styles/touchbank.scss 4:14-214 13:2-17:4 14:20-220

looks like it doesn’t know about webpack’s resolve path, and tries import the file, as it’s placed near the current css file

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19 (11 by maintainers)

Most upvoted comments

Definitely. autoprefixer should be called after all plugins that might generate rules. Btw @ai should display a note in bold in the README like I am doing for this plugin (postcss-import).

MoOx on Mar 16, 2016

@NXTaar Your precss module must under postcss-import.

It works for me.

module.exports = {
    postcss: function(webpack) {
        return {
            defaults: [postcssImport, precss, autoprefixer],
            cleaner: [
                postcssImport({
                    addDependencyTo: webpack,
                    path: [ path.resolve(__dirname + "/src") ]
                }),
                precss,
                autoprefixer({browsers:["> 5%", "ie >= 8", "Firefox < 20"]})
            ]
        }
    }
}

tpai on Mar 16, 2016