How to use absolute paths within a css-module to compose other classes instead of relative paths

Question

I want to be able to have a folder in the root of my app "src" that contains reusable css which I can compose from in the css modules wi

In my css no my class has composes: table from './../../../css-vars/index.css'; but i am trying to just be able to use composes: table from 'css-vars/index.css'; and have it resolve to the root of my project. Currently when I try this i get this error:

Module not found: 'css-vars/index.css' in /Users/jfarina/Desktop/schedule-react/src/components/layout

Here is what my css loader looks like:

{
  test: /\.css$/,
  loaders: [
    'style?sourceMap',
    'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
    'postcss-loader'
  ]
},

Any idea?

I solved a similar problem with with postcss smart-import by adding a path with my source. Is there a similar solution with the css-loader? I noticed there is a root query param ter but adding that didn't help

smartImport({
  addDependencyTo: webpack,
  path: [ path.resolve(__dirname, 'src') ]
})

Answer 1

You can try postcss-modules-resolve-imports