Why is Webpack file-loader not triggering for CSS urls?
up vote
0
down vote
favorite
I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.
See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?
#hero
background-image: url('/assets/welcome/responsive/header-image.jpg');
background-size: cover;
background-position: 0% 70%;
min-height: 435px;
background-color: #000;
color: $white;
font-weight: 200;
position: relative;
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports =
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry:
'public/compiled/app': './app/assets/javascripts/compile/application.js',
'public/compiled/seo_srp_map_sections':
'./app/assets/javascripts/compile/seo_srp_map_sections.js',
'app/assets/javascripts/server_rendering':
'./app/assets/javascripts/server_rendering_to_compile.js'
,
output:
filename: '[name].js',
path: path.resolve(__dirname, '.')
,
resolve:
alias:
templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')
,
plugins: [
new webpack.ProvidePlugin(
jQuery: 'jquery'
),
new MiniCssExtractPlugin(
filename: '[name].css'
)
],
module:
rules: [
test: /.ejs$/,
loader: 'ejs-loader'
,
test: /.m?jsx?$/,
use:
loader: 'babel-loader'
,
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
,
woff2
]
;javascript css webpack webpack-4 webpack-file-loader
asked Nov 10 at 2:59
Asherlc
2411524
add a comment |
up vote
0
down vote
favorite
I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.
See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?
#hero
background-image: url('/assets/welcome/responsive/header-image.jpg');
background-size: cover;
background-position: 0% 70%;
min-height: 435px;
background-color: #000;
color: $white;
font-weight: 200;
position: relative;
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports =
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry:
'public/compiled/app': './app/assets/javascripts/compile/application.js',
'public/compiled/seo_srp_map_sections':
'./app/assets/javascripts/compile/seo_srp_map_sections.js',
'app/assets/javascripts/server_rendering':
'./app/assets/javascripts/server_rendering_to_compile.js'
,
output:
filename: '[name].js',
path: path.resolve(__dirname, '.')
,
resolve:
alias:
templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')
,
plugins: [
new webpack.ProvidePlugin(
jQuery: 'jquery'
),
new MiniCssExtractPlugin(
filename: '[name].css'
)
],
module:
rules: [
test: /.ejs$/,
loader: 'ejs-loader'
,
test: /.m?jsx?$/,
use:
loader: 'babel-loader'
,
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
,
woff2
]
;javascript css webpack webpack-4 webpack-file-loader
asked Nov 10 at 2:59
Asherlc
2411524
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.
See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?
#hero
background-image: url('/assets/welcome/responsive/header-image.jpg');
background-size: cover;
background-position: 0% 70%;
min-height: 435px;
background-color: #000;
color: $white;
font-weight: 200;
position: relative;
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports =
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry:
'public/compiled/app': './app/assets/javascripts/compile/application.js',
'public/compiled/seo_srp_map_sections':
'./app/assets/javascripts/compile/seo_srp_map_sections.js',
'app/assets/javascripts/server_rendering':
'./app/assets/javascripts/server_rendering_to_compile.js'
,
output:
filename: '[name].js',
path: path.resolve(__dirname, '.')
,
resolve:
alias:
templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')
,
plugins: [
new webpack.ProvidePlugin(
jQuery: 'jquery'
),
new MiniCssExtractPlugin(
filename: '[name].css'
)
],
module:
rules: [
test: /.ejs$/,
loader: 'ejs-loader'
,
test: /.m?jsx?$/,
use:
loader: 'babel-loader'
,
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
,
woff2
]
;javascript css webpack webpack-4 webpack-file-loader
asked Nov 10 at 2:59
Asherlc
2411524
I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.
See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?
#hero
background-image: url('/assets/welcome/responsive/header-image.jpg');
background-size: cover;
background-position: 0% 70%;
min-height: 435px;
background-color: #000;
color: $white;
font-weight: 200;
position: relative;
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports =
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry:
'public/compiled/app': './app/assets/javascripts/compile/application.js',
'public/compiled/seo_srp_map_sections':
'./app/assets/javascripts/compile/seo_srp_map_sections.js',
'app/assets/javascripts/server_rendering':
'./app/assets/javascripts/server_rendering_to_compile.js'
,
output:
filename: '[name].js',
path: path.resolve(__dirname, '.')
,
resolve:
alias:
templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')
,
plugins: [
new webpack.ProvidePlugin(
jQuery: 'jquery'
),
new MiniCssExtractPlugin(
filename: '[name].css'
)
],
module:
rules: [
test: /.ejs$/,
loader: 'ejs-loader'
,
test: /.m?jsx?$/,
use:
loader: 'babel-loader'
,
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
,
woff2
]
; #hero
background-image: url('/assets/welcome/responsive/header-image.jpg');
background-size: cover;
background-position: 0% 70%;
min-height: 435px;
background-color: #000;
color: $white;
font-weight: 200;
position: relative;
#hero
background-image: url('/assets/welcome/responsive/header-image.jpg');
background-size: cover;
background-position: 0% 70%;
min-height: 435px;
background-color: #000;
color: $white;
font-weight: 200;
position: relative;
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports =
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry:
'public/compiled/app': './app/assets/javascripts/compile/application.js',
'public/compiled/seo_srp_map_sections':
'./app/assets/javascripts/compile/seo_srp_map_sections.js',
'app/assets/javascripts/server_rendering':
'./app/assets/javascripts/server_rendering_to_compile.js'
,
output:
filename: '[name].js',
path: path.resolve(__dirname, '.')
,
resolve:
alias:
templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')
,
plugins: [
new webpack.ProvidePlugin(
jQuery: 'jquery'
),
new MiniCssExtractPlugin(
filename: '[name].css'
)
],
module:
rules: [
test: /.ejs$/,
loader: 'ejs-loader'
,
test: /.m?jsx?$/,
use:
loader: 'babel-loader'
,
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
,
woff2
]
;const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports =
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry:
'public/compiled/app': './app/assets/javascripts/compile/application.js',
'public/compiled/seo_srp_map_sections':
'./app/assets/javascripts/compile/seo_srp_map_sections.js',
'app/assets/javascripts/server_rendering':
'./app/assets/javascripts/server_rendering_to_compile.js'
,
output:
filename: '[name].js',
path: path.resolve(__dirname, '.')
,
resolve:
alias:
templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')
,
plugins: [
new webpack.ProvidePlugin(
jQuery: 'jquery'
),
new MiniCssExtractPlugin(
filename: '[name].css'
)
],
module:
rules: [
test: /.ejs$/,
loader: 'ejs-loader'
,
test: /.m?jsx?$/,
use:
loader: 'babel-loader'
,
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
,
woff2
]
;javascript css webpack webpack-4 webpack-file-loader
javascript css webpack webpack-4 webpack-file-loader
asked Nov 10 at 2:59
Asherlc
2411524
asked Nov 10 at 2:59
Asherlc
2411524
asked Nov 10 at 2:59
Asherlc
2411524
asked Nov 10 at 2:59
Asherlc
2411524
asked Nov 10 at 2:59
Asherlc
2411524
2411524
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
-1
down vote
You can add MiniCssExtractPlugin like this:
plugins: [
new MiniCssExtractPlugin(
filename: "style.css",
chunkFilename: "style.chunk.css",
hot: true,
orderWarning: true,
reloadAll: true,
cssModules: true
)
]
And for images type, you can try with url-loader
gif)$/,
use: [
loader: 'url-loader',
options:
limit: 5000
]
For svg, font format you can use loader is file-loader.
answered Nov 10 at 3:41
Hai Tien
77141330
Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
– Asherlc
Nov 13 at 17:45
@Asherlc Have you tried?
– Hai Tien
Nov 14 at 0:21
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
-1
down vote
You can add MiniCssExtractPlugin like this:
plugins: [
new MiniCssExtractPlugin(
filename: "style.css",
chunkFilename: "style.chunk.css",
hot: true,
orderWarning: true,
reloadAll: true,
cssModules: true
)
]
And for images type, you can try with url-loader
gif)$/,
use: [
loader: 'url-loader',
options:
limit: 5000
]
For svg, font format you can use loader is file-loader.
answered Nov 10 at 3:41
Hai Tien
77141330
Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
– Asherlc
Nov 13 at 17:45
@Asherlc Have you tried?
– Hai Tien
Nov 14 at 0:21
add a comment |
up vote
-1
down vote
You can add MiniCssExtractPlugin like this:
plugins: [
new MiniCssExtractPlugin(
filename: "style.css",
chunkFilename: "style.chunk.css",
hot: true,
orderWarning: true,
reloadAll: true,
cssModules: true
)
]
And for images type, you can try with url-loader
gif)$/,
use: [
loader: 'url-loader',
options:
limit: 5000
]
For svg, font format you can use loader is file-loader.
answered Nov 10 at 3:41
Hai Tien
77141330
Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
– Asherlc
Nov 13 at 17:45
@Asherlc Have you tried?
– Hai Tien
Nov 14 at 0:21
add a comment |
up vote
-1
down vote
up vote
-1
down vote
You can add MiniCssExtractPlugin like this:
plugins: [
new MiniCssExtractPlugin(
filename: "style.css",
chunkFilename: "style.chunk.css",
hot: true,
orderWarning: true,
reloadAll: true,
cssModules: true
)
]
And for images type, you can try with url-loader
gif)$/,
use: [
loader: 'url-loader',
options:
limit: 5000
]
For svg, font format you can use loader is file-loader.
answered Nov 10 at 3:41
Hai Tien
77141330
You can add MiniCssExtractPlugin like this:
plugins: [
new MiniCssExtractPlugin(
filename: "style.css",
chunkFilename: "style.chunk.css",
hot: true,
orderWarning: true,
reloadAll: true,
cssModules: true
)
]
And for images type, you can try with url-loader
gif)$/,
use: [
loader: 'url-loader',
options:
limit: 5000
]
For svg, font format you can use loader is file-loader.
answered Nov 10 at 3:41
Hai Tien
77141330
answered Nov 10 at 3:41
Hai Tien
77141330
answered Nov 10 at 3:41
Hai Tien
77141330
answered Nov 10 at 3:41
Hai Tien
77141330
77141330
Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
– Asherlc
Nov 13 at 17:45
@Asherlc Have you tried?
– Hai Tien
Nov 14 at 0:21
add a comment |
Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
– Asherlc
Nov 13 at 17:45
@Asherlc Have you tried?
– Hai Tien
Nov 14 at 0:21
Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
– Asherlc
Nov 13 at 17:45
Why do you think this will work differently? As well, I want to keep using file-loader, is there any reason why you think this will work better?
– Asherlc
Nov 13 at 17:45
@Asherlc Have you tried?
– Hai Tien
Nov 14 at 0:21
@Asherlc Have you tried?
– Hai Tien
Nov 14 at 0:21
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235654%2fwhy-is-webpack-file-loader-not-triggering-for-css-urls%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
