Vue with css modules

I’m able to run storybook in my Vue project however the css modules are missing. I’ve also created a new storybook project with the default webpack config and I have the same issue. No styles

i have a component like this

<template>
  <div :class="$style.component">
    red text
  </div>
</template>

<script>
export default {
  name: 'Thing'
}
</script>

<style module>
.component {
  color: red;
}
</style>

and the rendered html is

<div>
  red text
</div>

With no css class. Do I need to do something specific to enable css modules?

[pocka]

@chrisjbrown Yeah, you need to configure a webpack rule for .css file in the way Vue Loader Docs describing (if you have files something like SASS, add rules for them too.) I’m not sure vue-cli-plugin handles it or not, though.

Sample Config

// man.js
module.exports = {
  // ...
  webpackFinal(config) {
    const isCssRule = rule =>
      rule.test && rule.test instanceof RegExp && rule.test.test("./file.css");

        return {
      ...config,
      module: {
        ...config.module,
        rules: [
          ...config.module.rules.filter(rule => !isCssRule(rule)),
          {
            test: /\.css$/,
            oneOf: [
              {
                resourceQuery: /module/,
                use: [
                  "style-loader",
                  {
                    loader: "css-loader",
                    options: {
                      modules: true
                    }
                  }
                ]
              },
              {
                use: ["style-loader", "css-loader"]
              }
            ]
          }
        ]
      }
    }
  }
}

CodeSandbox

[gretchelin]

I recently face this problem and unfortunately none of the suggestion above worked for me as is. The idea is correct, but I had to copy the vue-cli actual webpack config implementation for the css rule to make this work instead of using the one shown by pocka or other users above. For people who face the same problem, this is what works for me:

1. Run vue-cli-service inspect > output.js this will print out the webpack config vue actually uses. Refer to this official guide. Doing this will make sure the rules used by storybook is the one used by vue itself.

2. Look for the css rule from the file and copy pasted the whole css rule to storybook webpack config module.rule. At the time of this post, this is what the complete css rule look like

/* config.module.rule('css') */
      {
        test: /\.css$/,
        oneOf: [
          /* config.module.rule('css').rule('vue-modules') */
          {
            resourceQuery: /module/,
            use: [
              {
                loader: 'vue-style-loader',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              {
                loader: 'css-loader',
                options: {
                  sourceMap: false,
                  importLoaders: 2,
                  modules: {
                    localIdentName: '[name]_[local]_[hash:base64:5]'
                  }
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('css').rule('vue') */
          {
            resourceQuery: /\?vue/,
            use: [
              {
                loader: 'vue-style-loader',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              {
                loader: 'css-loader',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('css').rule('normal-modules') */
          {
            test: /\.module\.\w+$/,
            use: [
              {
                loader: 'vue-style-loader',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              {
                loader: 'css-loader',
                options: {
                  sourceMap: false,
                  importLoaders: 2,
                  modules: {
                    localIdentName: '[name]_[local]_[hash:base64:5]'
                  }
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('css').rule('normal') */
          {
            use: [
              {
                loader: 'vue-style-loader',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              {
                loader: 'css-loader',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          }
        ]
      },

1. Re run storybook and now <style module> will work just fine.

NOTE: as the goal is to replace the css rule the storybook uses, make sure if you extend the existing rules, you exclude the original css rule! The code @pocka shown here helped do the job:

const isCssRule = rule =>
  rule.test && rule.test instanceof RegExp && rule.test.test("./file.css");