フロントエンドの環境構築のサンプル作ってるのですが、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" } }
あなたの回答
tips
プレビュー