Cannot import resolved path

[NXTaar]

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

[TrySound]

@NXTaar I'm not sure that webpack can affect somehow on postcss-import.

[MoOx]

postcss have nothing to do with webpack. Just checkout postcss-import options in the readme. You will find what you look for.

[NXTaar]

The problem stays
here is my dir strcuture

root/
|
|-- src/              
|   |-- components/
        |--input/
           |--styles.scss
|   |-- layouts/
|   |-- styles/
        |--colors.scss

my post css option

module.exports = function (webpack) {
    return [
        autoprefixer,
        precss,
        postcssImport({
            addDependencyTo: webpack,
            path: [ path.resolve(__dirname + "/src/styles") ]
        }),
        reset({
            reset: {
            margin: 0,
            padding: 0,
            borderRadius: 0
        }}),
        initial
    ]
};

It still looking in the input directory locally

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

also tried @import 'colors.scss', @import 'styles/colors.scss' - same result

[MoOx]

@import './colors.scss' ?

[NXTaar]

still the same

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

Maybe i was setting the path parameter in postcss-inport options wrong?

[MoOx]

why do you use path.resolve with an absolute path?

[MoOx]

Try adding a slash at the end of the path

[MoOx]

also sidenote: using autoprefixer as the first plugin is bad as anything imported or generated by precss will not be prefixed

[NXTaar]

why do you use path.resolve with an absolute path?`

Because i'm on windows, using path.resolve makes slash handling more stable between different OS (on Mac and Linux there is no need of path.resolve)

using autoprefixer

thanks, moved it to the end

Try adding a slash at the end of the path

Done. still nothing. How exactly should i import the colors.scss file?

[TrySound]

@NXTaar Try to change root option.

[tpai]

@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"]})
            ]
        }
    }
}

[MoOx]

Don't use autoprefixer before postcss-import, inline source won't be prefixed.

[tpai]

@MoOx Thanks, should I put autoprefixer below precss?

[MoOx]

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).

[ai]

@MoOx maybe you should add check that import is on first place? You have all API for it.

[MoOx]

Maybe someday. But people might want to lint first, so not sure...

[Tux1]

There is no way to use webpack aliases within postcss-import ?

[longlho]

@Tux1 postcss is separate from webpack so I don't think it's possible

[pgmanutd]

May be enhanced-resolve can help.

Your postcss.config.js can be like this:

'use strict';

const path = require('path');
const ResolverFactory = require('enhanced-resolve/lib/ResolverFactory');
const NodeJsInputFileSystem = require('enhanced-resolve/lib/NodeJsInputFileSystem');
const CachedInputFileSystem = require('enhanced-resolve/lib/CachedInputFileSystem');

const CACHED_DURATION = 60000;
const fileSystem = new CachedInputFileSystem(new NodeJsInputFileSystem(), CACHED_DURATION);

const resolver = ResolverFactory.createResolver({
  alias: {
    '@blabla': path.resolve(__dirname, 'src')
  },
  extensions: ['.css'],
  modules: ['src', 'node_modules'],
  useSyncFileSystemCalls: true,
  fileSystem
});

module.exports = {
  plugins: {
    'postcss-import': {
      resolve(id, basedir) {
        return resolver.resolveSync({}, basedir, id);
      }
    }
  },
};

And use it like this:

@import '@blabla/your/path/to/file.css';