webpack+vue-loader不能解析vue文件中的style标签

Question

问题：webpack+vue-loader不能解析vue文件中的style标签。去掉style标签或者内联样式就是可以的

vue文件：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

webpack.config.js配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: {
        item: "./src/item.js",
    },
    devtool: 'source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            // 它会应用到普通的 `.js` 文件
            // 以及 `.vue` 文件中的 `<script>` 块
            /*{
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // 它会应用到普通的 `.css` 文件
            // 以及 `.vue` 文件中的 `<style>` 块
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }*/
        ]
    },
    resolve: {
        alias: {
            // 修改Vue倍导入时包的路径
            "vue$": "vue/dist/vue.js",
            public: path.resolve(__dirname, 'public'),
        }
    },

        plugins: [
        new VueLoaderPlugin(),

        new HtmlWebpackPlugin({
            template: './src/template/item.html',
            filename:'item.html',
            chunks: ['item']
        })
    ]
};

package.json vue+vue-loader版本

{
  "name": "my-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.5.5",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6"
  }
}

最后错误描述

Answer 1

Answer 2

webpack.config.js 那里，把注释给取消掉。

Answer 3

要使用css-loader