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

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

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

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

1073閲覧

webpack4.41.5でscssがバンドルできない

xyunow

総合スコア122

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

1クリップ

投稿2020/02/08 04:25

編集2020/02/10 03:43

webpack+scss環境を作ろうとしています。
scssをwebpackでコンパイル→bundle.jsに含めたいです。
jsのみのバンドルはできたのですが、scssも含めたバンドルがうまくいきません。
エラーメッセージ見る限りoptionsあたりの書き方に問題がありそうなのですが、正しい書き方がまったくわからず、教えていただきたいです。

ディレクトリ構成は以下のようになっています
イメージ説明

以下のようなエラーメッセージが出ます。

error

1Hash: ea4f2c5f734eebdbae39 2Version: webpack 4.41.5 3Time: 7ms 4Built at: 2020/02/07 19:53:46 5 Asset Size Chunks Chunk Names 6bundle.js 15 KiB main [emitted] main 7Entrypoint main = bundle.js 8[./js/index.js] 222 bytes {main} [built] 9[./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/dist/cjs.js?!./scss/test.scss] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./scss/test.scss 607 bytes {main} [built] [failed] [1 error] 10 + 3 hidden modules 11 12ERROR in ./scss/test.scss (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./scss/test.scss) 13Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 14ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. 15 - options has an unknown property 'options'. These properties are valid: 16 object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } 17 at validate (/private/var/www/webpack_test/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:85:11) 18 at Object.loader (/private/var/www/webpack_test/node_modules/sass-loader/dist/index.js:36:28) 19 @ ./scss/test.scss 2:26-149 20 @ ./js/index.js

以下は各ファイルの中身です

json

1//package.json 2{ 3 "scripts": { 4 "build": "webpack --watch" 5 }, 6 "dependencies": { 7 "css-loader": "^3.4.2", 8 "node-sass": "^4.13.1", 9 "sass-loader": "^8.0.2", 10 "style-loader": "^1.1.3", 11 "webpack": "^4.41.5", 12 "webpack-cli": "^3.3.10" 13 } 14}

webpack

1//webpack.config.js 2module.exports = { 3 // メインとなるJavaScriptファイル(エントリーポイント) 4 entry: "./js/index.js", 5 mode: "development", 6 // ファイルの出力設定 7 output: { 8 // 出力ファイルのディレクトリ名 9 path: `${__dirname}/dist`, 10 // 出力ファイル名 11 filename: "bundle.js" 12 }, 13 module: { 14 rules: [ 15 { 16 test: /.scss/, 17 use: [ 18 // linkタグに出力する機能 19 "style-loader", 20 // CSSをバンドルするための機能 21 { 22 loader: "css-loader", 23 options: { 24 // オプションでCSS内のurl()メソッドの取り込みを禁止する 25 url: false, 26 // ソースマップの利用有無 27 sourceMap: enabledSourceMap, 28 29 // 0 => no loaders (default); 30 // 1 => postcss-loader; 31 // 2 => postcss-loader, sass-loader 32 importLoaders: 2 33 } 34 }, 35 { 36 loader: "sass-loader", 37 options: { 38 // ソースマップの利用有無 39 sourceMap: enabledSourceMap 40 } 41 } 42 ] 43 } 44 ] 45 }, 46};

javascript

1//index.js 2import '../scss/test.scss'; 3import * as util from './utility.js' 4/////////////////////////////////////////////////////////////////////// 5 6document.getElementById("js_open").addEventListener("click", util.modalOpen, false);

javascript

1//utility.js 2export function modalOpen() { 3 console.log("hello"); 4}

scss

1//test.scss 2h1 { 3 color: aqua; 4}

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset='UTF-8'> 5 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="format-detection" content="telephone=no"> 8 </head> 9 <body> 10 <h1>ようこそwebpackの世界へ</h1> 11 <p>javascript・scss</p> 12 <button id="js_open"></button> 13 14 <script src='../dist/bundle.js'></script> 15 </body> 16 17</html>

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

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

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

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

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

guest

回答1

0

自己解決

以下の参考サイトの通りwebpack.config.jsを修正したところscss含めたbundleに成功しました。
https://note.com/youheyhey0505/n/n64771d0989a3

webpack

1//修正後のwebpack.config.js 2 module: { 3 rules: [ 4 { 5 test: /.css/, 6 use: [ 7 // linkタグに出力する機能 8 "style-loader", 9 "css-loader", 10 ] 11 }, 12 { 13 test: /.scss/, 14 use: [ 15 // linkタグに出力する機能 16 "style-loader", 17 "css-loader", 18 "sass-loader", 19 ] 20 } 21 ] 22 },

投稿2020/02/10 03:42

xyunow

総合スコア122

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問