webpack+vueでstyleタグを読みたい

発生している問題・エラーメッセージ

vueとwebpackを使って開発していますが、
vueの単体コンポーネントがstyleタグを読めなくなりました。

webpackで出力されたファイルにstyleタグ記述のスタイルがかかりません。
解決策をご存じの方、どうか知恵をお貸しください。

該当のソースコード

src/main.js
src/components/example.vue
index.html
の３つで構成されております。

src/main.js(エントリポイント)

import Vue from 'vue';
import Example from './components/example.vue';

const app = new Vue({
  el: "#app",
  components: {
    Example,
  },
  render: h => h(Example),
});

src/components/example.vue

vue
1<template>
2  <div class="example">{{ msg }}</div>
3</template>
4
5<script>
6export default {
7  data() {
8    return {
9      msg: "Hello world!",
10    };
11  },
12};
13</script>
14
15<style>
16.example {
17  color: red;
18}
19</style>
20

index.html(表示用)(出力jsは ./dist に配置)

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Webpack Vue.js</title>
6  </head>
7  <body>
8    <div id="app"></div>
9    <script src="./dist/bundle.js"></script>
10  </body>
11</html>
12

問題

結果、exampleクラスは付与されているが何のスタイルも掛かっていない
「Hello world!」の文字列がバンドルするjsに出力されます。
何のスタイルも適用されないのが問題です。

試したこと

以下のようにtemplateタグ内に直接styleを記述した時は、そのスタイルが反映されます。
そのため単一コンポーネントのstyleタグ読み込みに問題が起きていると推測しておりますが実際いかに。

src/main.js

js
1<template>
2  <div class="example" style="color:red">{{ msg }}</div>
3</template>

↑インラインスタイル color:red; は正常に付与されます

補足情報（FW/ツールのバージョンなど）

以下はpackage.jsonとwebpack.config.jsです

package.json

json
1{
2  "name": "card_ui2",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "start": "webpack"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC",
12  "devDependencies": {
13    "css-loader": "^5.0.0",
14    "style-loader": "^2.0.0",
15    "vue": "^2.6.12",
16    "vue-loader": "^15.9.4",
17    "vue-template-compiler": "^2.6.12",
18    "webpack": "^5.3.2",
19    "webpack-cli": "^4.1.0"
20  }
21}

webpack.config.js

js
1const path = require('path');
2const { VueLoaderPlugin } = require("vue-loader");
3
4module.exports = {
5  mode: "development",
6  entry: './src/main.js',
7  devtool: 'inline-source-map',
8  output: {
9    path: path.resolve(__dirname, 'dist'),
10    filename: 'bundle.js'
11  },
12  resolve: {
13    extensions: [".ts", ".js"],
14  },
15  module: {
16    rules: [
17      {
18        test: /.vue?$/, loader: 'vue-loader'
19      },
20      {
21        test: /.css$/,
22        use: ['vue-style-loader', 'css-loader']
23      },
24    ]
25  },
26
27  plugins: [new VueLoaderPlugin()],
28};
29

どうかご指南のほどよろしくお願い致します。

行動規範の内容に同意します

回答2件

webpack.config.jsの内容は何かを元に手を加えたものでしょうか。それとも、コマンド等で自動生成されたものでしょうか。

https://vue-loader-v14.vuejs.org/ja/configurations/extract-css.html
上記サイトには、次のようなextractCSSの記載がありましたが、これは不要なのですかね。

json
1  rules: [
2    {
3      test: /.vue$/,
4      loader: 'vue-loader',
5      options: { extractCSS: true }
6    }

投稿2020/10/30 08:14

plasticgrammer

総合スコア629

supereater712

2020/10/30 08:32

webpack.config.jsに、仰った一行: ``` options: { extractCSS: true } ``` を足して再ビルドしてみましたが、依然styleは読み込まれませんでした、すみません。このwebpack.config.jsですが、これは何かから、かなり手を加えたもので、何をもとにしたか覚えておりません…。回答ありがとうございます。

行動規範の内容に同意します

自己解決

とうとう見つけました。
vue-style-loaderでした。
css読み込みのためにvue-style-loaderのかわりにstyle-loaderを使用する必要があったのです。

js
1  module: {
2    rules: [
3      {
4        test: /.vue?$/, loader: 'vue-loader'
5      },
6      {
7        test: /.css$/,
8        use: ['vue-style-loader', "css-loader"]// vue-style-loader
9      },
10    ]
11  },

↓

js
1  module: {
2    rules: [
3      {
4        test: /.vue?$/, loader: 'vue-loader'
5      },
6      {
7        test: /.css$/,
8        use: ['style-loader', "css-loader"]// style-loader
9      },
10    ]
11  },
12