普通的html+wepack项目如何使用vue的模块功能

Question

普通的html+wepack项目如何使用vue的模块功能

问题出现背景

老html项目，服务端渲染模板，但是使用webpack打包
现在加很多功能，想使用vue的模块化开发，安装了vuejs、vue-loader等相关的东西，现在已经成功实现开发，但是问题来了。

问题描述

.vue文件内的style样式无法解析，或者说没有效果

本地运行后，页面上vue模块代码：

不知道是不是和原来的scss文件有冲突？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
vue模块：

<template>
  <div id="apps">
    <img :src="data.bannerImage" />
    <h2>{{ data.titleText }}</h2>
    <p>{{ data.description }}</p>
    <ul>
      <li v-for="(item, i) in data">
        <img :src="item.fields.file.url">
        <h1>{{item.fields.file.fileName}}</h1>
      </li>
    </ul>
  </div>
</template>
<script>
import api from './api'
export default {
  name: 'App',
  mounted() {
    this.getProduct();
  },
  data() {
    return {
      data: {
        id: 1,
        data: null
      }
    }
  },
  methods: {
    async getProduct() {
      this.data = await api.getAssets();
    }
  }
}
</script>

<style scoped lang="scss">
#apps {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  ul {
     color: red;
  }
}
</style>

这是webpack的配置：

module.exports = {
    bail: true,
    context: __dirname,
    entry: {
        main: './assets/js/app.js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
            },
            {
                test: /\.js$/,
                include: /(assets\/js|assets\\js|stencil-utils)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: [
                            'dynamic-import-webpack', // Needed for dynamic imports.
                            'lodash', // Automagically tree-shakes lodash.
                            'transform-regenerator', // Transforms async and generator functions.
                        ],
                        presets: [
                            ['env', {
                                loose: true, // Enable "loose" transformations for any plugins in this preset that allow them.
                                modules: false, // Don't transform modules; needed for tree-shaking.
                                useBuiltIns: true, // Tree-shake babel-polyfill.
                            }],
                        ],
                    },
                },
            },
            {
                test: /jquery-migrate/,
                use: 'imports-loader?define=>false',
            },
            {
              test: /\.jsx$/,
              exclude: /node_modules/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: ['react'],
                  },
              }
            },
            {
              test: /\.scss|\.css$/,
              use:  [
                  'style-loader',
                  {
                      loader: 'css-loader',
                      options: {
                          modules: true
                      }
                  },
                  'sass-loader'
              ],
            },
        ],
    }
}

项目结构：

templates为所有html模板文件：

vue文件单独在这里：

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

解决了！
webpack的配置改一下：

{
  test: /\.scss|\.css$/,
  loader: 'style-loader!css-loader'
},

调试去引入外部的css文件时报错css-loader和style-loader，网上搜了下，修改一下配置，成功了

Answer 2

vue-template-compiler 有木有

Answer 3

url-loader和style-loader有没有安装？