vue-loader: use style tag can't work（CssSyntaxError）

@papac, i have the same error, did you solve this?

Hi, I have the same problem two. my project is at : https://github.com/banxi1988/FlaskVueDemo/tree/master/client

{
  "private": true,
  "devDependencies": {
    "css-loader": "^0.28.11",
    "typescript": "^2.8.3",
    "vue-loader": "^15.0.6",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.6.0"
  },
  "dependencies": {
    "vue": "^2.5.16",
    "vue-class-component": "^6.2.0"
  }
}

below is webpack.config.js

const webpack = require("webpack")
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: "development",
    entry: "./todoapp.ts",
    output:{
        filename:"todoapp.bundle.js",
        path:path.resolve(__dirname, '.')
    },
    resolve:{
        extensions: [".ts",'.js', ".vue"]
    },
    module:{
        rules:[
            {test:/\.vue$/, loader: 'vue-loader'},
            {
                test:/\.ts$/, exclude: /node_modules/,
                loader:"ts-loader",
                options:{
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /\.css$/,
                use: [ 'vue-style-loader','css-loader' ]
            },
            
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]

}

Once I add a style tag in the TodoItem.vue file, It will produce errors as follows:

ERROR in ./TodoItem.vue?vue&type=style&index=0&lang=css (./node_modules/_vue-loader@15.0.6@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_vue-style-loader@4.1.0@vue-style-loader!./node_modules/_css-loader@0.28.11@css-loader!./node_modules/_vue-loader@15.0.6@vue-loader/lib??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css)
Module build failed: CssSyntaxError: /Users/banxi/Workspace/FlaskVueFullstack/client/TodoItem.vue:5:1: Unknown word
    at Input.error (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_postcss@6.0.22@postcss/lib/input.js:119:22)
    at Parser.unknownWord (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_postcss@6.0.22@postcss/lib/parser.js:507:26)
    at Parser.other (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_postcss@6.0.22@postcss/lib/parser.js:172:18)
    at Parser.parse (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_postcss@6.0.22@postcss/lib/parser.js:85:26)
    at parse (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_postcss@6.0.22@postcss/lib/parse.js:26:16)
    at new LazyResult (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_postcss@6.0.22@postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_postcss@6.0.22@postcss/lib/processor.js:117:12)
    at compileStyle (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_@vue_component-compiler-utils@1.2.1@@vue/component-compiler-utils/dist/compileStyle.js:34:35)
    at Object.module.exports (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_vue-loader@15.0.6@vue-loader/lib/loaders/stylePostLoader.js:9:33)
 @ ./TodoItem.vue?vue&type=style&index=0&lang=css 1:0-341 1:357-360 1:362-700 1:362-700
 @ ./TodoItem.vue
 @ ./node_modules/_ts-loader@4.2.0@ts-loader??ref--5-0!./node_modules/_vue-loader@15.0.6@vue-loader/lib??vue-loader-options!./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue
 @ ./todoapp.ts

After some search problem still, So I try to find the reason myself. let me look at the output below.

    at Object.module.exports (/Users/banxi/Workspace/FlaskVueFullstack/client/node_modules/_vue-loader@15.0.6@vue-loader/lib/loaders/stylePostLoader.js:10:33)
 @ ./TodoItem.vue?vue&type=style&index=0&lang=css 1:0-341 1:357-360 1:362-700 1:362-700
 @ ./TodoItem.vue
 @ ./node_modules/_ts-loader@4.2.0@ts-loader??ref--5-0!./node_modules/_vue-loader@15.0.6@vue-loader/lib??vue-loader-options!./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue?vue&type=script&lang=ts
 @ ./TodoApp.vue
 @ ./todoapp.ts

1. first I add a print statment in _vue-loader@15.0.6@vue-loader/lib/loaders/stylePostLoader.js:10:33

  console.warn("source:", source) // this line is add by me
  const query = qs.parse(this.resourceQuery.slice(1))
  const { code, map, errors } = compileStyle({
    source,
    filename: this.resourcePath,
    id: `data-v-${query.id}`,
    map: inMap,
    scoped: !!query.scoped,
    trim: true
  })

In my opinion, I think the source should be a css source string, to me surprise the output was below:

source: // style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = require("!!./node_modules/_css-loader@0.28.11@css-loader/index.js!./node_modules/_vue-loader@15.0.6@vue-loader/lib/index.js??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css");
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = require("!./node_modules/_vue-style-loader@4.1.0@vue-style-loader/lib/addStylesClient.js").default
var update = add("716a72c4", content, false, {});
// Hot Module Replacement
if(module.hot) {
 // When the styles change, update the <style> tags
 if(!content.locals) {
   module.hot.accept("!!./node_modules/_css-loader@0.28.11@css-loader/index.js!./node_modules/_vue-loader@15.0.6@vue-loader/lib/index.js??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css", function() {
     var newContent = require("!!./node_modules/_css-loader@0.28.11@css-loader/index.js!./node_modules/_vue-loader@15.0.6@vue-loader/lib/index.js??vue-loader-options!./TodoItem.vue?vue&type=style&index=0&lang=css");
     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
     update(newContent);
   });
 }
 // When the module is disposed, remove the <style> tags
 module.hot.dispose(function() { update(); });
}

hope this output will be help for the diagnose.