I've set up the html boilerplate using webpack. I'm currently encountering an issue where calling an image in my scss file like "background: url('/img/img.png');" isn't working. I've included the webpack file and folder structure for reference. I attempted to use "url-loader" but it also didn't solve the problem. I've spent a lot of time trying to resolve this, but unfortunately, I haven't found a solution yet. Could someone please assist me in fixing this issue?
This is how my folders are structured:
Project
|
+-- html
| |
| +-- css
| +-- img
| +-- js
| +-- index.html
|
+-- src
| |
| +-- js
| +-- scss
Webpack File
'use strict';
let webpack = require('webpack');
let path = require('path');
let nodeModulesPath = path.join(__dirname, 'node_modules');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let exp = []; // multiple exports array
// Exports configs for each language
let configs = [
{
name: 'min',
entry: './src/index.js',
scssRule: {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader",
options: { minimize: true },
},
{
loader: "sass-loader",
options: { minimize: true },
},
],
fallback: "style-loader"
}),
}
}
];
// Generate exports module for each config
for (let c of configs) {
var e = {
context: __dirname,
watch: true,
entry: c.entry,
output: {
path: path.resolve(__dirname, 'html/'),
filename: "js/app.js"
},
module: {
rules: [{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: "jshint-loader"
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader",
options: { minimize: true },
}],
fallback: "style-loader"
}),
},
c.scssRule,
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
loader: 'file-loader',
options: {
name: '../[path].[ext]',
publicPath: '../',
emitFile: false
},
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '../[path].[ext]',
publicPath: '../',
emitFile: false
},
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/app.css'
}),
new webpack.optimize.UglifyJsPlugin({
compressor: { warnings: false }
})
]
}
exp.push(e);
}
module.exports = exp;