title: Cannot configure css modules to work with vue-loader
body: <p>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</p>
  
  <p>I use following component to test configs:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="hello"&gt;
        The red text here
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    }
  }
  &lt;/script&gt;
  
  &lt;style module&gt;
    .hello {
      color: red;
    }
  &lt;/style&gt;
  </code></pre>
  
  <ol>
  <li>First doc example:</li>
  </ol>
  
  <p><a href="https://cli.vuejs.org/guide/css.html#referencing-assets" rel="nofollow noreferrer">https://cli.vuejs.org/guide/css.html#referencing-assets</a></p>
  
  <blockquote>
    <p>You can use CSS Modules in *.vue files out of the box with <code>&lt;style module&gt;</code>.</p>
  </blockquote>
  
  <p>My <code>vue.config.js</code>:</p>
  
  <pre><code>module.exports = {
      css: {
          loaderOptions: {
              css: {
                  localIdentName: '[name]-[hash]',
              }
          }
      }
  }
  </code></pre>
  
  <p>The text is still black</p>
  
  <ol start="2">
  <li>Second doc example (The first code snippet in the link below):</li>
  </ol>
  
  <p><a href="https://vue-loader.vuejs.org/guide/css-modules.html" rel="nofollow noreferrer">https://vue-loader.vuejs.org/guide/css-modules.html</a></p>
  
  <p>My <code>vue.config.js</code>:</p>
  
  <pre><code>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]'
                              }
                          }
                      ]
                  }
              ]
          }
      }
  }
  </code></pre>
  
  <p>Gives error when I do <code>npm run serve</code>:</p>
  
  <pre><code>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&amp;type=style&amp;index=0&amp;module=true&amp;lang=css&amp;");
  &gt; 5 | if(typeof content === 'string') content = [[module.id, content, '']];
      | ^
    6 | if(content.locals) module.exports = content.locals;
    7 | // add the styles to the DOM
  </code></pre>
  
  <p>I found quite a lot of issues on github regarding last error, but no answer</p>
  
  <p>Please help me to understand, what I do wrong.</p>