title: Fix sass-loader error with vue.config.js in Vue.js
body: <p>I am trying to use an external sass file (About.sass) in my Vue.js application generated from Vue CLI 3. However I am receiving an error about 'Unknown word' when it compiles.</p>
  
  <p>After a lot of research, my application uses 'webpack-chain' and I use 'vue.config.js' to configure sass-loader.</p>
  
  <p><b>My configuration timeline:</b></p>
  
  <ol>
  <li>Vue CLI 3 - default preset</li>
  <li>added <code>&lt;style src="../sass/About.sass" scoped&gt;&lt;/style&gt;</code></li>
  <li>yarn add sass-loader node-sass style-loader</li>
  <li>added loader to vue.config.js</li>
  </ol>
  
  <p><b>vue.config.js</b></p>
  
  <pre><code>module.exports = {
      chainWebpack: config =&gt; {
        config.module
          .rule('sass')
          .test(/\.sass$/)
          .use('sass-loader')
            .loader('sass-loader')
            .loader('css-loader')
            .loader('style-loader')
          .end()
      }
  }
  </code></pre>
  
  <p>I am really blocked and unable to get this to work. I get this error:</p>
  
  <pre><code> ERROR  Failed to compile with 1 errors                                                                        22:02:03
  
   error  in ./src/sass/About.sass?vue&amp;type=style&amp;index=0&amp;id=c226fde6&amp;scoped=true&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (2:1) Unknown word
  
    1 |
  &gt; 2 | var content = require("!!../../node_modules/vue-style-loader/index.js??ref--9-oneOf-1-0!../../node_modules/css-loader/index.js??ref--9-oneOf-1-1!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./About.sass?vue&amp;type=style&amp;index=0&amp;id=c226fde6&amp;scoped=true&amp;lang=css&amp;");
      | ^
    3 |
    4 | if(typeof content === 'string') content = [[module.id, content, '']];
  </code></pre>
  
  <p>Any help or advice? Thanks in advance.</p>