Support for Webpack's aliases / modulesDirectories

[princed]

Support for Webpack's aliases / modulesDirectories

[princed]

Shipped in 1.2.0

[rpunkfu]

I managed to implement this, still need some refactor, but will try to open PR tomorrow :)

[princed]

Great idea! I'd add some resolve function call in walkFile.

[kumarharsh]

+1 this can be great. Also, nice work @princed. Although, how do I use this? I'm using webpack's css-loader.

[princed]

@kumarharsh Thanks! See usage examples in README, you have to use postcss-loader.

[kumarharsh]

@princed here's my config:

/* webpack.config.js */
{
  test:  /\.css$/,
  exclude: path.resolve('./node_modules'),
  loaders: [
    'style-loader',
    'css-loader?modules&camelCase&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
    'postcss-loader',
  ],
},

/* postcss.config.js */
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-modules-values-replace'),
    require('postcss-custom-properties')(),
    require('postcss-color-function'),
    require('autoprefixer'),
  ],
};

Also, I'm guessing the part in the README about:

{
  postcss: webpack => [
    require('postcss-modules-values-replace')({fs: webpack._compiler.inputFileSystem}),
    require('postcss-calc')
  ]
}

is optional, and has to be written in the webpack configuration? Because my postcss config is a separate json file. I made a mistake, it's a JS file.

---

But when I use @value in my code, the values don't get replaced. If I disable your plugin the @value do get replaced.

[kumarharsh]

@rpunkfu can you share some version of the working code? I'd like to use it too in my project, but am not really fluent in webpack/postcss internals. Maybe I can help a little in the refactor...

[rpunkfu]

I managed to implement this feature but, I didnt manage to get hot reload working, when changing file imported via @value rule, I dont really see way to do it and lack of this feature makes this plugin useless for me :(

[rpunkfu]

I deleted code, but maybe I will try to work on it again and share code for others, who doesnt care about feature mentioned above :)

[kumarharsh]

@princed I'm still getting the same error Module build failed: Error: Can't resolve 'css/shared/colors.css' in ..... I have resolve.modulesDirectories set to ['src', 'node_modules'] in webpack config.