質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

465閲覧

【webpack】style-loaderでscssのビルド結果が読み込めない

hasshy

総合スコア102

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/10/31 08:24

お世話になります。

vueベースのアプリケーションを作っているのですが、scssのビルドが出来ずに困っています。
情報を探しても、簡単に解決できているようで、どこで詰まっているのか検討がつけられませんでした。

設定の仕方に間違いがありますでしょうか?

構成について

使用するライブラリ

cssに関するライブラリは下記をインストールした状態です。

名前備考
webpackversion4
style-loader
css-loader
mini-css-extract-plugin本番用に実ファイルを作成するため

ファイル構成

下記のようになっています。

  • root
    • public
    • src
      • scss
        • style.scss // style.css内で
        • _substyle.scss // style.css内で読み込むscss
      • app.js // webpackのentryに指定しているjs
    • webpack.common.js // 共通のwebpackの設定
    • webpack.dev.js // 開発環境用の設定
    • webpack.prod.js // 本番用の設定

想定している結果

ライブラリの事を正確に把握していなければ申し訳ありません。
下記のようにstyleファイルが生成されると考えています。

html

1<!DOCTYPE html> 2<html> 3<head> 4<title></title> 5</head> 6<body> 7<script type="text/javascript" src="bundle.js"></script> 8<style> 9 (styleloaderにより生成されたスタイル) 10</style> 11</body> 12</html>

状態

styleが生成されません。  
ビルドエラーも起きていません。
webpackで生成された時に、作られるbulid.jsにも追加されていませんでした。

webpackの設定

本番用と開発用でコンフィグを変えて、共通の設定は別ファイル化しています

webpack.common.js

ベースの設定です。

js

1const path = require('path') 2const webpack = require('webpack'); 3const CleanWebpackPlugin = require('clean-webpack-plugin') 4const HtmlWebpackPlugin = require('html-webpack-plugin') 5const VueLoaderPlugin = require('vue-loader/lib/plugin'); 6 7module.exports = { 8 entry: './src/app.js', 9 output: { 10 path: path.resolve(__dirname, './dest'), 11 filename: 'bundle.js' 12 }, 13 module: { 14 rules: [ 15 { 16 test: /.html$/, 17 exclude: [ 18 /node_modules/ 19 ], 20 use: { 21 loader: 'file-loader', 22 query: { 23 name: '[name].[ext]' 24 } 25 } 26 27 }, 28 { 29 test: /.vue$/, 30 exclude: /node_modules/, 31 loader: 'vue-loader', 32 options: { 33 esModule: true 34 } 35 }, 36 { 37 test: /.pug$/, 38 oneOf: [ 39 { 40 resourceQuery: /^?vue/, 41 use: ['pug-plain-loader'] 42 }, 43 { 44 use: [ 45 'raw-loader', 'pug-plain-loader' 46 ] 47 } 48 49 ] 50 }, 51 { 52 test: /.js$/, 53 exclude: /node_modules/, 54 loader: 'babel-loader' 55 }, 56 { 57 test: /.css$/, 58 use: [ 59 'style-loader', 60 { 61 loader: 'css-loader', 62 options: { 63 // css内のurl()メソッドの取り込みを禁止 64 url: false, 65 // CSSの空白文字を削除してファイルを小さくする 66 minimize: true 67 } 68 } 69 ], 70 } 71 ] 72 }, 73 resolve: { 74 // imposrtを省略するために記載 75 extensions: ['.js', '.vue'], 76 alias: { 77 vue$: 'vue/dist/vue.esm.js' 78 } 79 }, 80 devServer: { 81 contentBase: path.resolve(__dirname, 'public') 82 }, 83 plugins: [ 84 new CleanWebpackPlugin(['dist']), // 公開用ディレクトリを綺麗にする 85 new HtmlWebpackPlugin({ 86 template: './src/pug/index.pug' 87 }), // 公開用ディレクトリを綺麗にする 88 new VueLoaderPlugin() 89 ] 90} 91

webpack.dev.js

開発環境用の設定ファイルです。
本番環境との違いは、devServerの設定がある事と、
scssは最終的にstyle-loaderで<style>タグを生成する想定です。

js

1const path = require('path') 2const webpack = require('webpack'); 3 4// 共通設定と統合するためのライブラリ 5const merge = require('webpack-merge'); 6const common = require('./webpack.common'); 7 8// プラグイン 9const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 10 11module.exports = merge(common, { 12 mode: "development", 13 module: { 14 rules: [ 15 { 16 test: /.(sa|sc)ss$/, 17 exclude: /node_modules/, 18 use: [ 19 'style-loader', 20 'css-loader', 21 { 22 loader: 'sass-loader', 23 options: { 24 includePaths: [ 25 path.resolve(__dirname, 'src/scss/') 26 ] 27 } 28 } 29 ] 30 } 31 ] 32 }, 33 devServer: { 34 contentBase: path.resolve(__dirname, 'public') 35 }, 36 plugins: [ 37 new MiniCssExtractPlugin({ 38 filename: '[name].css', 39 chunkFilename: '[id].css' 40 }) 41 ] 42}) 43

(参考)webpack.prod.js

まだ、確認は出来ていませんが次のように設定しています。

js

1const path = require('path') 2const webpack = require('webpack'); 3 4// 共通設定と統合するためのライブラリ 5const merge = require('webpack-merge'); 6const common = require('./webpack.common'); 7 8// プラグイン 9const MiniCssExtractPlugin = require('mini-css-extract-plugin') 10 11module.exports = merge(common, { 12 mode: "production", 13 module: { 14 rules: [ 15 { 16 test: /.(sa|sc)ss$/, 17 use: [ 18 MiniCssExtractPlugin.loader, 19 'css-loader', 20 { 21 loader: 'sass-loader', 22 options: { 23 includePaths: [ 24 'src/scss/*' 25 ] 26 } 27 } 28 ] 29 } 30 ] 31 }, 32 plugins: [ 33 new MiniCssExtractPlugin({ 34 filename: '[name].[hash].css', 35 chunkFilename: '[id].[hash].css' 36 }) 37 ] 38}) 39

実行コマンド

sh

1$ webpack-dev-server --hot --config webpack.dev.js

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
app.jsでimport ".src/style.scss"をし忘れていました…。

投稿2018/10/31 10:50

hasshy

総合スコア102

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問