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

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

ただいまの
回答率

90.51%

  • JavaScript

    20417questions

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

  • HTML

    11508questions

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

  • Vue.js

    1316questions

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

  • Pug

    43questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 254

hasshy

score 26

お世話になります。

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

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

 構成について

 使用するライブラリ

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

名前 備考
webpack version4
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ファイルが生成されると考えています。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
<style>
  (styleloaderにより生成されたスタイル)
</style>
</body>
</html>

 状態

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

 webpackの設定

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

 webpack.common.js 

ベースの設定です。

const path = require('path')
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dest'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                exclude: [
                    /node_modules/
                ],
                use: {
                    loader: 'file-loader',
                    query: {
                        name: '[name].[ext]'
                    }
                }

            },
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader',
                options: {
                    esModule: true
                }
            },
            {
                test: /\.pug$/,
                oneOf: [
                    {
                        resourceQuery: /^\?vue/,
                        use: ['pug-plain-loader']
                    },
                    {
                        use: [
                            'raw-loader', 'pug-plain-loader'
                        ]
                    }

                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            // css内のurl()メソッドの取り込みを禁止
                            url: false,
                            // CSSの空白文字を削除してファイルを小さくする
                            minimize: true
                        }
                    }
                ],
            }
        ]
    },
    resolve: {
        // imposrtを省略するために記載
        extensions: ['.js', '.vue'],
        alias: {
            vue$: 'vue/dist/vue.esm.js'
        }
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public')
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),   // 公開用ディレクトリを綺麗にする
        new HtmlWebpackPlugin({
            template: './src/pug/index.pug'
        }),                                 // 公開用ディレクトリを綺麗にする
        new VueLoaderPlugin()
    ]
}

 webpack.dev.js

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

const path = require('path')
const webpack = require('webpack');

// 共通設定と統合するためのライブラリ
const merge = require('webpack-merge');
const common = require('./webpack.common');

// プラグイン
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(common, {
    mode: "development",
    module: {
        rules: [
            {
                test: /\.(sa|sc)ss$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            includePaths: [
                                path.resolve(__dirname, 'src/scss/')
                            ]
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public')
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]
})

 (参考)webpack.prod.js

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

const path = require('path')
const webpack = require('webpack');

// 共通設定と統合するためのライブラリ
const merge = require('webpack-merge');
const common = require('./webpack.common');

// プラグイン
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = merge(common, {
    mode: "production",
    module: {
        rules: [
            {
                test: /\.(sa|sc)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            includePaths: [
                                'src/scss/*'
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
            chunkFilename: '[id].[hash].css'
        })
    ]
})

 実行コマンド

$ webpack-dev-server --hot --config webpack.dev.js
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20417questions

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

  • HTML

    11508questions

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

  • Vue.js

    1316questions

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

  • Pug

    43questions

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