webpack 打包vue文件的时候 vue文件中的style样式不生效

Question

1. package.json代码

{
  "name": "coment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "devDependencies": {
    "file-loader": "^6.2.0",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.12.17",
    "babel-loader": "^8.0.0-beta.0",
    "css-loader": "^5.0.2",
    "vue": "^2.6.12",
    "vue-loader": "^14.2.2",
    "vue-style-loader": "^4.1.2"
  }
}

2.Vue文件代码

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
  import Cpn from './Cpn'

  export default {
    name: "App",
    components: {
      Cpn
    },
    data() {
      return {
        message: 'Hello Webpack',
        name: 'coderwhy'
      }
    },
    methods: {
      btnClick() {

      }
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

3.webpack.config.json代码

const path = require("path")


module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
    //publicPath:"dist/" 配置文件默认路径
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //使用loder时是从右向左的
        use: ['vue-style-loader','style-loader' ,'css-loader']
      },
      {
        test: /\.less$/,
        use: [{loader:"vue-style-loader"},{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //限制文件大小
              //当加载图片小于limit时，会将图片编译为base64字符串格式，大于limit时需要使用file-loader进行加载
              limit: 8196,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        //exclube 排除
        //include 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test:  /\.vue$/,
        use:  ['vue-loader']
      }
    ]

  },
  resolve: {
    //alias 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': "vue/dist/vue.esm.js"
    }
  }
}

最后附上效果图![上传中...]()

希望各位大佬行行好，帮我看一下到底问题出在那

Answer 1

//使用loder时是从右向左的
use: ['vue-style-loader','style-loader' ,'css-loader']

写错了
既然你都注释了从右往左，正确的解析应该是：
先用 vue-loader 来解析 .vue 的样式转成 css
然后是 css-loader 解析 css 样式
再然后是 style-loader 将 css 加到 html 里
所以正确的顺序是：

use: ['style-loader' ,'css-loader']

Answer 2

Answer 3

• 在 v14 或更低版本中，如果你想为一个推导出来的 loader 定制选项，你不得不在 Vue Loader 自己的 loaders 选项中将它重复一遍。https://vue-loader.vuejs.org/zh/migrating.html#loader-推导

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        'css': ['vue-style-loader', 'style-loader', 'css-loader'],
      }
    }
}

或者直接将 vue-loader 升到15的版本