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

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

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

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

Q&A

0回答

1919閲覧

webpackによるscssのバンドル時の画像等のurlが読み込めない

torabe

総合スコア18

Sass

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

0グッド

1クリップ

投稿2019/12/27 03:21

編集2022/01/12 10:55

webpackを利用してscssからcssへ変換を行う際にscssファイルから背景画像やフォント読み込み
Base64に変換したり、そのまま出力したりしたい場合、scssファイル中で相対パスを有効にするために
resolve-url-loaderを利用しているのですがうまくいきません。

#package.jsonとwebpack.config.js

json

1package.json 2{ 3 "name": "packages", 4 "version": "1.0.0", 5 "description": "", 6 "main": "index.js", 7 "scripts": { 8 "dev": "yarn run develop", 9 "develop": "webpack --progress --mode development --debug --devtool source-map --output-pathinfo --config ./webpack.config.js", 10 "start": "webpack-dev-server --mode development --debug --devtool source-map --output-pathinfo --open --config ./webpack.config.js --hot --inline", 11 "watch": "webpack --progress --mode development --debug --devtool source-map --output-pathinfo --config ./webpack.config.js --watch --color --progress", 12 "build": "webpack --progress --mode production --config ./webpack.config.js" 13 }, 14 "keywords": [], 15 "author": "", 16 "license": "ISC", 17 "browserslist": [ 18 "last 5 version", 19 "ie >= 9", 20 "iOS >= 8.1", 21 "Android >= 4.0", 22 ">= 2%", 23 "Firefox >= 20" 24 ], 25 "devDependencies": { 26 "@babel/core": "^7.6.0", 27 "@babel/polyfill": "^7.6.0", 28 "@babel/preset-env": "^7.6.0", 29 "@babel/preset-react": "^7.0.0", 30 "autoprefixer": "^9.6.0", 31 "babel-loader": "^8.0.6", 32 "copy-webpack-plugin": "^4.6.0", 33 "core-js": "3", 34 "css-loader": "^1.0.1", 35 "dotenv-webpack": "^1.7.0", 36 "eslint": "^5.16.0", 37 "eslint-loader": "^2.1.2", 38 "eslint-plugin-react": "^7.11.1", 39 "extract-text-webpack-plugin": "^4.0.0-beta.0", 40 "file-loader": "^1.1.11", 41 "html-loader": "^0.5.5", 42 "html-webpack-plugin": "^3.2.0", 43 "http-server": "^0.11.1", 44 "merge-stream": "^1.0.1", 45 "node-sass": "^4.12.0", 46 "openssl": "^1.1.0", 47 "path": "^0.12.7", 48 "postcss-loader": "^2.1.6", 49 "raw-loader": "^3.1.0", 50 "regenerator-runtime": "^0.13.3", 51 "resolve-url-loader": "^3.1.1", 52 "run-sequence": "^2.2.1", 53 "sass-loader": "^7.1.0", 54 "style-loader": "^0.21.0", 55 "tinypng-webpack-plugin": "^2.0.0", 56 "url-loader": "^1.1.2", 57 "vue-loader": "^15.7.0", 58 "webpack": "4.35.0", 59 "webpack-cli": "3.3.5", 60 "webpack-dev-server": "^3.7.1", 61 "webpack-stream": "^4.0.3", 62 "write-file-webpack-plugin": "^4.5.0" 63 }, 64 "dependencies": { 65 66 } 67} 68

js

1webpack.config.js 2 3const path = require('path'); 4const glob = require('glob'); 5 6const srcPath = './src/**/'; 7const srcPathReg = './src/'; 8 9const ExtractTextPlugin = require('extract-text-webpack-plugin'); 10const extractSass = new ExtractTextPlugin({filename:'[name]'}); 11 12module.exports = (env, argv) => [ 13 { 14 /* ---------------- 15 CSS用モジュール 16 ----------------- */ 17 //entry: scssTargets, 18 entry: scssEntries, 19 // ファイルの出力設定 20 output: { 21 // 出力ファイルのディレクトリ名 22 path: path.resolve(__dirname, 'public'), 23 publicPath: '/', 24 // 出力ファイル名 25 //filename: 'style.css' 26 filename: '[name]' 27 }, 28 mode: argv.mode, 29 devtool: (argv.mode === 'development') ? 'source-map' : 'none', 30 module: { 31 rules: [ 32 // CSSファイルの読み込み 33 { 34 test: /.scss$/, 35 exclude: /node_modules/, 36 use: ExtractTextPlugin.extract({ 37 fallback: 'style-loader', 38 use: [ 39 // CSSをバンドルするための機能 40 { 41 loader: 'css-loader', 42 options: { 43 // オプションでCSS内のurl()メソッドの取り込みを禁止する 44 //url: false, 45 // CSSの空白文字を削除する 46 minimize: true, 47 // ソースマップの利用有無 48 sourceMap: (argv.mode === 'development'), 49 50 // 0 => no loaders (default); 51 // 1 => postcss-loader; 52 // 2 => postcss-loader, sass-loader 53 importLoaders: 2 54 } 55 }, 56 // PostCSSのための設定 57 { 58 loader: 'postcss-loader', 59 options: { 60 // PostCSS側でもソースマップを有効にする 61 sourceMap: (argv.mode === 'development'), 62 plugins: [ 63 // Autoprefixerを有効化 64 // ベンダープレフィックスを自動付与する 65 require('autoprefixer')({ 66 grid: 'autoplace', 67 overrideBrowserslist: ['last 5 version', 'ie >= 9', 'iOS >= 8.1', 'Android >= 4.0', '>= 2%', 'Firefox >= 20'] 68 }) 69 ] 70 }, 71 }, 72 { 73 loader: 'resolve-url-loader' 74 }, 75 // Sassをバンドルするための機能 76 { 77 loader: 'sass-loader', 78 options: { 79 sourceMap: true, 80 sourceMapContents: false 81 } 82 } 83 ] 84 }) 85 }, 86 { 87 // 対象となるファイルの拡張子 88 test: /.css/, 89 // ローダー名 90 loader: 'url-loader', 91 }, 92 { 93 // 対象となるファイルの拡張子 94 test: /.(gif|png|jpe?g|svg)$/, 95 // 画像をBase64として取り込む 96 loader: 'url-loader', 97 options: { 98 limit: 100 * 1024, // 100KB以上だったら埋め込まずファイルとして分離する 99 context: 'src/', 100 name: '[path][name].[ext]', 101 outputPath: './', 102 publicPath : (path) => { 103 return '/' + path; 104 } 105 } 106 }, 107 { 108 // 対象となるファイルの拡張子 109 test: /.(woff|woff2|eot|ttf|ttc|WOFF|WOFF2|EOT|TTF|TTC|otf|svgf)$/, 110 // 画像をBase64として取り込む 111 loader: 'file-loader', 112 options: { 113 context: 'src/', 114 name: '[path][name].[ext]', 115 outputPath: './', 116 publicPath : (path) => { 117 return '/' + path; 118 } 119 } 120 } 121 ] 122 }, 123 plugins: [ 124 //tinyPing, 125 extractSass 126 ], 127 resolve: { 128 // style-loader の中で、.jsファイルを拡張子なしで requireしているところがあるため、'.js'が必要 129 extensions: ['.css', '.scss', '.js'] 130 } 131 } 132 133];

#scssファイルの構成とコード

public ─── css ─┬─ img ← 画像ファイル出力先 └─ style.css ← 出力ファイル src ─── css ─┬─ _components ← 各コンポーネントのcss ├─ _variables ← 編集 ├─ img ← 画像ファイルを保存する ├─ app.scss ← ここでscssファイルをimportする └─ style.scss ← app.scssにimportされる

scss

1src/css/style.scss 2.class-name{ 3 background:url(./img/image.jpg) no-repeat center center; 4}

#エラーメッセージ

Module not found: Error: Can't resolve './_components/img/image.jpg' in '**\src\css' @ ./src/css/app.scss (./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??ref--4-3!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-5!./src/css/app.scss) 7:45979-46028

実際エラーが出るのはbuildのときで
developwatchでは問題ありません。

#実際に試したこと
resolve-url-loaderはソースマップがないとうまくいかないとのことなのでbuildコマンドでもソースマップを有効にして試してみましたが、それでもうまくいきませんでした。

#追記
色々調べた結果
webpackのmodeプロパティでproductionとした場合に発生しているのでないかの考えられるのですが、
理由をご存じの方がいらっしゃいましたらご回答よろしくお願いします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問