Webpack relative css url () with file loader / css loader
I'm completely new to webpack / npm and I'm trying to figure out how to work with css urls in other project dependencies.
Folder structure
src
fonts/
scss/
app.scss
js/
app.js
img/
index.html
webpack.config.js
var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js'
},
devServer: {
stats: 'errors-only',
compress: true,
open: true,
port: 9000
},
module: {
rules: [
// ES6 -> ES5 transpiler
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
// SCSS to CSS -> Autoprefix -> Load CSS
{
test: /\.(scss|css)$/,
use: extractPlugin.extract({
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [require('autoprefixer')()]
}
},
'sass-loader'
]
})
},
// HTML Loader
{
test: /\.html$/,
use: ['html-loader']
},
// Image Loader
{
test: /\.(jpg|png|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'img/',
name: '[name].[ext]'
}
}
]
},
// Font Loader
{
test: /\.(eot|ttf|woff)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts/',
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
new extractPlugin({filename: 'scss/app.css'}),
new cleanWebpackPlugin(['dist']),
new htmlWebpackPlugin({ template: 'src/index.html' }),
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
]
};
I have successfully included lightGallery in my project like so:
app.js
import 'lightgallery';
app.scss
@import '~lightgallery/dist/css/lightgallery.css';
The photo gallery stylesheet is referencing fonts that I successfully upload to fonts/
using webpackfile-loader
My problem is that the inline css file is trying to reference the fonts related to the scss folder instead of my root.
those.: http://localhost:9000/scss/img/loading.gif
I need all css related resources to resolve from my root directory
ie http://localhost:9000/img/loading.gif
Is there anyway I can configure my css loader to add the entire url using /
?
Help!
source to share
file-loader
respects output.publicPath
, but since you haven't installed it, the resulting path will be a relative path. You can set the public path /
.
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js',
publicPath: '/'
},
This will affect other loaders and plugins that handle any asset as well. This is usually what you want and is therefore recommended, but if you only want to change it for certain files, you can use the option publicPath
on file-loader
.
{
loader: 'file-loader',
options: {
outputPath: 'img/',
name: '[name].[ext]',
publicPath: '/'
}
}
source to share