Vue-loader: Webpack4 compiles the style error in the vue template

[fuyan-run]

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './index.js',
    output: {
        filename: '[name].[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ]
}

entry

import App from './App.vue'

App.vue

<template>
    <div>  {{msg}} </div>
</template>
<script>
export default {
    data () {
        return {
            msg: 'test'
        }
    }
}
</script>
<style>
body {
    font-size: 12px
}
</style>

Throw an error

ERROR in ./App.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=style&index=0&lang=css&) 17:5
Module parse failed: Unexpected token (17:5)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> body {
|     font-size: 12px
| }
 @ ./App.vue?vue&type=style&index=0&lang=css& 1:0-122 1:138-141 1:143-262 1:143-262
 @ ./App.vue
 @ ./index.js

Remove

<style>
body {
    font-size: 12px
}
</style>

everything is normal

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

[AssKicker0214]

I have the same problem, this is my package.json:

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "vue": "2.5.13",
    "vue-cli": "^2.9.6",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "2.5.13",
    "webpack": "^4.0.0",
    "webpack-cli": "^3.3.6"
  }
}

and, `app.vue`

<template>
    <div id="test">{{text}}</div>
</template>
<script>
    export default {
        data(){
            return {
                text:'hello webpack!'
            }
        }
    }
</script>
<style lang="css">
    #text{
        color: #999;
    }
</style>

and `webpack.config.js`:

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode: "development",
    //配置入口
    entry: path.join(__dirname, 'src/index.js'),
    output: {//配置打包出口文件
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {//让webpack识别vue模板
                test: /.vue$/,
                loader: ['vue-loader']
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

and the error goes like:

Module parse failed: Unexpected character '#' (14:0)
File was processed with these loaders:
 * ./node_modules/[email protected]@vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> #text{
|     color: #999;
| }
 @ ./src/app.vue?vue&type=style&index=0&lang=css& 1:0-142 1:158-161 1:163-302 1:163-302     
 @ ./src/app.vue
 @ ./src/index.js

Help please, I'm going to give up on it!

[Avakado]

Hi fuyan-run, so did you get the resolve of this?