use scoped:true, Module build failed vue-template-loader/lib/scoped-style-loader.js

[nuonuoge]

I use vue-cli3.0 create a project, when use scoped:false,it works, app.ts

import { HelloWorld } from './components/HelloWorld';
import { Component, Vue } from 'vue-property-decorator';
import WithRender from './App.html?style=./App.scss';

@WithRender
@Component({
  components: {
    HelloWorld
  }
})
export default class App extends Vue {
  name: string =  'app';
}

vue.config.js like this

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('ts')
      .test(/\.ts$/)
      .use('ts-loader')
      .loader('ts-loader')
      .end()
    config.module
      .rule('tsx')
      .test(/\.tsx?$/)
      .use('ts-loader')
      .loader('ts-loader')
      .end()
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: 'vue-template-loader',
          exclude: /index.html/,
          options: {
            transformAssetUrls: {
              video: ['src', 'poster'],
              source: 'src',
              img: 'src',
              image: 'xlink:href'
            },
            scoped: false
          }
        }
      ],
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.common.js'
      }
    }
  }
}

when use scoped: true, it will casue error, vue.config.js like this

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('ts')
      .test(/\.ts$/)
      .use('ts-loader')
      .loader('ts-loader')
      .end()
    config.module
      .rule('tsx')
      .test(/\.tsx?$/)
      .use('ts-loader')
      .loader('ts-loader')
      .end()
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: 'vue-template-loader',
          exclude: /index.html/,
          options: {
            transformAssetUrls: {
              video: ['src', 'poster'],
              source: 'src',
              img: 'src',
              image: 'xlink:href'
            },
            scoped: true
          }
        },
        {
          enforce: 'post',
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
        {
          test: /\.scss$/,
          use: ['postcss-loader', 'sass-loader']
        },
        {
          enforce: 'post',
          test: /\.scss$/,
          use: ['style-loader', 'css-loader']
        }
      ],
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.common.js'
      }
    }
  }
}

error: ./src/App.scss (./node_modules/vue-template-loader/lib/scoped-style-loader.js?id=a6b6cba2!./src/App.scss) Module build failed (from ./node_modules/vue-template-loader/lib/scoped-style-loader.js): NonErrorEmittedError: (Emitted value instead of an instance of Error) E:\vue\vue-elm-ts\src\App.scss:5:1: Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

*Is it possible to provide a exmpale scoped: true with vuecli-3*

[Hammster]

@nuonuoge this is because of a comment in line 5 of your scss file, i just encountered the same issue.

You can temporarily fix it by changing to the /*comment*/ format instead of //comment

[Hammster]

@ktsn I think the issue is that component-compiler-utils does parse the sass/scss source as CSS which only has the comment style /* comment */

The two solutions are to either change the way sass/scss scoped styles are processed, or to stripe the comments prior inputing them into the source property of compileStyleAsync

[nuonuoge]

@Hammster my app.scss is empty，no comment，use css now