vue-loader 官网配置Scoped CSS 样式不显示之坑。

<template>
  <div id="a" style="background-color: gray" >
    <form  action="index.html" method="post">
      <P>账号：<input v-model="user.id"  ></P>
      <P>密码：<input v-model="user.password" ></P>
      <p><input type="button" @click="toClick" value="验证"></p>
      <p><input type="submit"  value="登录"></p>
    </form>
  </div>
</template>
<script>
export default {
  name: "login",
  data: () => ({
      user: {
        id: '',
        password: ''
      }
  }),
  methods: {
    toClick() {
      alert("click");
    }
  }
}
</script>
<style scoped charset="utf-8" >

</style>

　　该vue 文件中 div 样式如上写，在webpack 打包后，能正常在浏览器显示。

但是如果用到style 标签后，在里面书写css 则无法加载。

问题的原因是：

查看vue-style-loader 源码中关于对文件的配置：https://github.com/vuejs/vue-style-loader/blob/master/.babelrc

看到配置："plugins": ["transform-es2015-modules-commonjs"]

而css-loader 中对于这个配置为：https://github.com/webpack-contrib/css-loader#esmodule

默认使用哦 ES modules.

解决方法为：修改下其中一个loader 的配置即可。

个人通过webpack.config.js 将.css 的解析css-loader 通过如下配置，问题解决。<style>标签内配置后则无此问题。

        test: /\.css$/,
        use:[
              'vue-style-loader',
              {
                loader: 'css-loader',
                options:  {
                  esModule: false
                }
              }            

　　

 查看 style-loader  源码中option 默认配置也和 css-loader 配置一样，则问题出在 vue-style-loader 这个问题配置：呵呵。吐槽下。