Cannot configure css modules to work with vue-loader

user_10450928 0
Viewed 1747

CSS modules are not working on my fresh vue project, installed via vue-cli3. The are two config examples in the docs. One of them is ignored by my application, second shows errors upon build

I use following component to test configs:

<template>
  <div class="hello">
      The red text here
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style module>
  .hello {
    color: red;
  }
</style>
  1. First doc example:

https://cli.vuejs.org/guide/css.html#referencing-assets

You can use CSS Modules in *.vue files out of the box with <style module>.

My vue.config.js:

module.exports = {
    css: {
        loaderOptions: {
            css: {
                localIdentName: '[name]-[hash]',
            }
        }
    }
}

The text is still black

  1. Second doc example (The first code snippet in the link below):

https://vue-loader.vuejs.org/guide/css-modules.html

My vue.config.js:

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                // enable CSS Modules
                                modules: true,
                                // customize generated class names
                                localIdentName: '[local]_[hash:base64:8]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}

Gives error when I do npm run serve:

Syntax Error: SyntaxError

(5:1) Unknown word

  3 | // load the styles
  4 | var content = require("!!../../node_modules/css-loader/index.js??ref--13-1!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HelloWorld.vue?vue&type=style&index=0&module=true&lang=css&");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | if(content.locals) module.exports = content.locals;
  7 | // add the styles to the DOM

I found quite a lot of issues on github regarding last error, but no answer

Please help me to understand, what I do wrong.

vue-loader css-modules vue-cli vue.js
2 Answers

Your first attempt was almost ok, just pass the module flag:

module.exports = {
    css: {
      loaderOptions: {
        module: true, // here is the config
        css: {
          localIdentName: '[name]-[hash]',
        }
      }
    }
user_56594150

It's work for me

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    const options = {
      sourceMap: false,
      importLoaders: 2,
      modules: {
        localIdentName: '[name]______[local]_[hash:base64:5]',
        auto: () => true,
      },
    };

    config.module.rule('css').oneOf('vue-modules').use('css-loader').options(options);
    config.module.rule('postcss').oneOf('vue-modules').use('css-loader').options(options);
    config.module.rule('scss').oneOf('vue-modules').use('css-loader').options(options);
    config.module.rule('sass').oneOf('vue-modules').use('css-loader').options(options);
    config.module.rule('less').oneOf('vue-modules').use('css-loader').options(options);
    config.module.rule('stylus').oneOf('vue-modules').use('css-loader').options(options);
  },
};
user_198442460
Related