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

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

新規登録して質問してみよう
ただいま回答率
87.20%
コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

webpackでSCSSの背景画像をBase64にしたら表示されず困ってます

kumakuma112t
kumakuma112t

総合スコア8

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0回答

0評価

0クリップ

3169閲覧

投稿2017/11/19 14:43

編集2022/01/12 10:55

フロントエンドの環境構築のサンプル作ってるのですが、Base64の設定がうまく行かず困ってます。書き出しが、うまく行ってるようにみえるのですが、サイトを表示して、画像が表示されません。

検証で、pタグにbeforeのスタイルが表示れるのは確認してます。

###SCSSファイル

p:before { display: inline-block; width: 1em; height: 1em; background-image: url(../img/sample.png); background-size: contain; content: ""; }

###ビルド後のCSSファイル

p:before { display: inline-block; width: 1em; height: 1em; background-image: url(data:image/png;base64,bW9kdWxlLmV4cG9  ~~~ 長いので省略 ~~~~ DQyI=); background-size: contain; content: ""; }

###webpack.config.js

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const extractSass = new ExtractTextPlugin("[name].bundle.css"); module.exports = [ { // ======================================================== // NOTE JS用モジュール // ======================================================== entry: { main: './src/js/main.js' }, output: { path: path.resolve(__dirname, 'public/dist/js'), publicPath: '/js/', filename: '[name].bundle.js' }, module: { rules: [ { enforce: 'pre', test: /.js$/, exclude: /node_modules/, loader: 'eslint-loader' }, { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] }, plugins: [ /* use jQuery as Global */ new webpack.ProvidePlugin({ jQuery: 'jquery' // $: 'jquery' }) ], resolve: { extensions: ['.js'] } }, { // ======================================================== // NOTE CSS用モジュール // ======================================================== entry: { main: './src/scss/main.scss' }, output: { path: path.resolve(__dirname, 'public/dist/css'), // publicPath: '/css/', filename: '[name].bundle.css' }, module: { rules: [ { test: /.(png|woff|woff2|eot|ttf|svg)(?v=[0-9].[0-9].[0-9])?$/, use: [ { loader: 'url-loader' } ] }, { test: /.scss$/, exclude: /node_modules/, use: extractSass.extract({ fallback: 'style-loader', use:[ 'css-loader?sourceMap', 'sass-loader?sourceMap' // { // loader: 'postcss-loader', // options: { // plugins: function () { // return [ // require('autoprefixer') // ]; // } // } // } ] }) }, { // 10KB以下の画像をBase64で出力 test: /.(jpe?g|png|gif|svg|ico)(?.+)?$/, use: { loader: 'url-loader', options: { limit: 10240, name: '../img/[name].[ext]' } } }] }, plugins: [ extractSass ], resolve: { // style-loader の中で、.jsファイルを拡張子なしで requireしているところがあるため、'.js'が必要 extensions: ['.css', '.js'] } } ];

###package.json

{ "name": "_test", "version": "1.0.0", "description": "test", "main": "./src/main.js", "scripts": { "dev": "npm-run-all -p watch server", "release": "webpack --progress --optimize-minimize", "watch": "webpack --progress --colors --devtool source-map --watch", "server": "browser-sync start --server public --serverStatic public --files public/* || exit 0" }, "keywords": [], "author": "sample", "license": "MIT", "devDependencies": { "autoprefixer": "^7.1.6", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-espower": "^2.3.2", "babel-preset-env": "^1.6.1", "browser-sync": "^2.18.13", "css-loader": "^0.28.7", "eslint": "^4.11.0", "eslint-loader": "^1.9.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "node-sass": "^4.6.1", "npm-run-all": "^4.1.2", "postcss-loader": "^2.0.8", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.8.1" }, "dependencies": { "jquery": "^3.2.1" } }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。