経緯
webpackには、CSSファイル内の画像パスをbase64に変換して挿入してくれる「url-loader」というのがあると知って、それを利用しようとしたのですがうまくいきません。
ビルド時には特にエラーは出ておらず、いろいろ試したのですが、一向に変換してくれません。
お手数ですが、ご助言いただけると幸いです。
環境
- Windows 10 Home
- Node.js v11.7.0
- npm v6.5.0
- webpack v4.29.0
package.json
json
1{ 2 "name": "aaaa", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "build": "webpack", 9 "watch": "webpack --watch" 10 }, 11 "author": "", 12 "license": "ISC", 13 "devDependencies": { 14 "autoprefixer": "^9.4.6", 15 "css-loader": "^2.1.0", 16 "cssnano": "^4.1.8", 17 "file-loader": "^3.0.1", 18 "mini-css-extract-plugin": "^0.5.0", 19 "node-sass": "^4.11.0", 20 "postcss-loader": "^3.0.0", 21 "sass-loader": "^7.1.0", 22 "url-loader": "^1.1.2", 23 "webpack": "^4.29.0", 24 "webpack-cli": "^3.2.1" 25 } 26}
webpack.config.js
JavaScript
1const MODE = 'development'; 2const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 3const enabledSourceMap = (MODE === 'development'); 4const devtool_value = enabledSourceMap ? "inline-source-map" : ""; 5 6module.exports = { 7 8 mode: MODE, 9 10 devtool: devtool_value, 11 12 module: { 13 rules: [ 14 { 15 test: /.scss/, 16 use: [ 17 MiniCssExtractPlugin.loader, 18 { 19 loader: 'css-loader', 20 options: { 21 url: false, 22 sourceMap: enabledSourceMap, 23 importLoaders: 2 24 }, 25 }, 26 { 27 loader: 'postcss-loader', 28 options: { 29 sourceMap: enabledSourceMap, 30 plugins: [ 31 require('autoprefixer')({ 32 browsers: [ 33 "last 2 version", 34 "> 0.2%", 35 ], 36 }), 37 require('cssnano')(), 38 ] 39 }, 40 }, 41 { 42 loader: 'sass-loader', 43 options: { 44 sourceMap: enabledSourceMap, 45 } 46 }, 47 ], 48 }, 49 { 50 test: /.(gif|png|jpg|eot|wof|woff|woff2|ttf|svg)$/, 51 loader: 'url-loader', 52 }, 53 ], 54 }, 55 plugins: [ 56 new MiniCssExtractPlugin({ 57 filename: 'style.min.css', 58 }) 59 ], 60};
style.min.css
css
1.icon{background-image:url(icon.png)} 2 3/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvc2Nzcy9zdHlsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLE1BQ0UsOEJBQStCLEMiLCJmaWxlIjoic3R5bGUubWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBjaGFyc2V0IFwiVVRGLThcIjtcclxuXHJcbi5pY29uIHtcclxuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoaWNvbi5wbmcpO1xyXG59XHJcbiJdLCJzb3VyY2VSb290IjoiIn0=*/
コマンドプロンプト内の表示
cmd
1Hash: 9882774b60180a36fa72 2Version: webpack 4.29.0 3Time: 879ms 4Built at: 2019-01-25 16:35:12 5 Asset Size Chunks Chunk Names 6 main.js 9.39 KiB main [emitted] main 7style.min.css 437 bytes main [emitted] main 8Entrypoint main = style.min.css main.js 9[./src/index.js] 29 bytes {main} [built] 10[./src/scss/style.scss] 39 bytes {main} [built] 11 + 1 hidden module 12Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!node_modules/postcss-loader/src/index.js??ref--4-2!node_modules/sass-loader/lib/loader.js??ref--4-3!src/scss/style.scss: 13 Entrypoint mini-css-extract-plugin = * 14 [./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/scss/style.scss] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/src??ref--4-2!./node_modules/sass-loader/lib/loader.js??ref--4-3!./src/scss/style.scss 462 bytes {mini-css-extract-plugin} [built] 15 + 1 hidden module
試したこと
- パッケージの再インストール
- mini-css-extract-plugin,postcss-loader,sass-loader使わずビルド
- あらゆる階層にicon.png設置
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/02 08:08