お世話になります。
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ファイルが生成されると考えています。
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。