Webpack doesn't create right paths for images in production css file
To add images into the project i'm using content: url() css property inside sass file and specify relative path to src folder e.g. content: url('/images/right-arrow.svg');.
The problem is that in production build i need to get rid of the first slash to have such path ('images/right-arrow.svg') inside of a bundled css file.
The only way i could get desired behaviour is to use url: false option for css-loader, and writing path without slash in sass file: content: url('/images/right-arrow.svg'), but such option don't add necessary file from node_modules e.g. fonts and images.
Webpack Config:
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public/'),
filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
rules: [
{
loader: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
},
'sass-loader'
]
},
{
test: /.(svg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images'
}
}
},
{
test: /.(otf|woff2|ttf|eot|woff)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
}
]
}
What am i missing in webpack config to achieve paths to work correcty?
reactjs webpack sass css-loader
asked Nov 23 '18 at 17:00
tawreontawreon
679
add a comment |
To add images into the project i'm using content: url() css property inside sass file and specify relative path to src folder e.g. content: url('/images/right-arrow.svg');.
The problem is that in production build i need to get rid of the first slash to have such path ('images/right-arrow.svg') inside of a bundled css file.
The only way i could get desired behaviour is to use url: false option for css-loader, and writing path without slash in sass file: content: url('/images/right-arrow.svg'), but such option don't add necessary file from node_modules e.g. fonts and images.
Webpack Config:
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public/'),
filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
rules: [
{
loader: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
},
'sass-loader'
]
},
{
test: /.(svg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images'
}
}
},
{
test: /.(otf|woff2|ttf|eot|woff)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
}
]
}
What am i missing in webpack config to achieve paths to work correcty?
reactjs webpack sass css-loader
asked Nov 23 '18 at 17:00
tawreontawreon
679
add a comment |
To add images into the project i'm using content: url() css property inside sass file and specify relative path to src folder e.g. content: url('/images/right-arrow.svg');.
The problem is that in production build i need to get rid of the first slash to have such path ('images/right-arrow.svg') inside of a bundled css file.
The only way i could get desired behaviour is to use url: false option for css-loader, and writing path without slash in sass file: content: url('/images/right-arrow.svg'), but such option don't add necessary file from node_modules e.g. fonts and images.
Webpack Config:
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public/'),
filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
rules: [
{
loader: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
},
'sass-loader'
]
},
{
test: /.(svg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images'
}
}
},
{
test: /.(otf|woff2|ttf|eot|woff)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
}
]
}
What am i missing in webpack config to achieve paths to work correcty?
reactjs webpack sass css-loader
asked Nov 23 '18 at 17:00
tawreontawreon
679
To add images into the project i'm using content: url() css property inside sass file and specify relative path to src folder e.g. content: url('/images/right-arrow.svg');.
The problem is that in production build i need to get rid of the first slash to have such path ('images/right-arrow.svg') inside of a bundled css file.
The only way i could get desired behaviour is to use url: false option for css-loader, and writing path without slash in sass file: content: url('/images/right-arrow.svg'), but such option don't add necessary file from node_modules e.g. fonts and images.
Webpack Config:
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public/'),
filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
rules: [
{
loader: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
},
'sass-loader'
]
},
{
test: /.(svg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images'
}
}
},
{
test: /.(otf|woff2|ttf|eot|woff)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
}
]
}
What am i missing in webpack config to achieve paths to work correcty?
reactjs webpack sass css-loader
reactjs webpack sass css-loader
asked Nov 23 '18 at 17:00
tawreontawreon
679
asked Nov 23 '18 at 17:00
tawreontawreon
679
asked Nov 23 '18 at 17:00
tawreontawreon
679
asked Nov 23 '18 at 17:00
tawreontawreon
679
asked Nov 23 '18 at 17:00
tawreontawreon
679
679
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Ok, I've solved the issue. I was using resolve-url-loader with no results, before @Ujin suggested to use it. After his comment I've clarified what resolve-url-loader does and cofigured it propertly to solve my issue. The main problem is that I've missed to read important paragraph of resolve-url-loader docs, which says:
source-maps required for loaders preceding resolve-url-loader (regardless of devtool).
Also I didn't use root option of resolve-url-loader plugin. So, webpack config for .scss files looks like this:
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'resolve-url-loader',
options: {
root: path.join(__dirname, 'src')
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
}
answered Nov 26 '18 at 11:34
tawreontawreon
679
add a comment |
Check the documentation about problems with url(...).
It suggests using resolve-url-loader.
Also you can try to use copy-webpack-plugin
answered Nov 23 '18 at 17:14
UjinT34UjinT34
65910
Files are copied correclty to public folder, the main problem with the paths to these files.
– tawreon
Nov 23 '18 at 18:12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53450528%2fwebpack-doesnt-create-right-paths-for-images-in-production-css-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Ok, I've solved the issue. I was using resolve-url-loader with no results, before @Ujin suggested to use it. After his comment I've clarified what resolve-url-loader does and cofigured it propertly to solve my issue. The main problem is that I've missed to read important paragraph of resolve-url-loader docs, which says:
source-maps required for loaders preceding resolve-url-loader (regardless of devtool).
Also I didn't use root option of resolve-url-loader plugin. So, webpack config for .scss files looks like this:
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'resolve-url-loader',
options: {
root: path.join(__dirname, 'src')
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
}
answered Nov 26 '18 at 11:34
tawreontawreon
679
add a comment |
Ok, I've solved the issue. I was using resolve-url-loader with no results, before @Ujin suggested to use it. After his comment I've clarified what resolve-url-loader does and cofigured it propertly to solve my issue. The main problem is that I've missed to read important paragraph of resolve-url-loader docs, which says:
source-maps required for loaders preceding resolve-url-loader (regardless of devtool).
Also I didn't use root option of resolve-url-loader plugin. So, webpack config for .scss files looks like this:
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'resolve-url-loader',
options: {
root: path.join(__dirname, 'src')
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
}
answered Nov 26 '18 at 11:34
tawreontawreon
679
add a comment |
Ok, I've solved the issue. I was using resolve-url-loader with no results, before @Ujin suggested to use it. After his comment I've clarified what resolve-url-loader does and cofigured it propertly to solve my issue. The main problem is that I've missed to read important paragraph of resolve-url-loader docs, which says:
source-maps required for loaders preceding resolve-url-loader (regardless of devtool).
Also I didn't use root option of resolve-url-loader plugin. So, webpack config for .scss files looks like this:
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'resolve-url-loader',
options: {
root: path.join(__dirname, 'src')
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
}
answered Nov 26 '18 at 11:34
tawreontawreon
679
Ok, I've solved the issue. I was using resolve-url-loader with no results, before @Ujin suggested to use it. After his comment I've clarified what resolve-url-loader does and cofigured it propertly to solve my issue. The main problem is that I've missed to read important paragraph of resolve-url-loader docs, which says:
source-maps required for loaders preceding resolve-url-loader (regardless of devtool).
Also I didn't use root option of resolve-url-loader plugin. So, webpack config for .scss files looks like this:
test: /.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'resolve-url-loader',
options: {
root: path.join(__dirname, 'src')
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
}
answered Nov 26 '18 at 11:34
tawreontawreon
679
edited Nov 26 '18 at 11:48
answered Nov 26 '18 at 11:34
tawreontawreon
679
answered Nov 26 '18 at 11:34
tawreontawreon
679
answered Nov 26 '18 at 11:34
tawreontawreon
679
679
add a comment |
add a comment |
Check the documentation about problems with url(...).
It suggests using resolve-url-loader.
Also you can try to use copy-webpack-plugin
answered Nov 23 '18 at 17:14
UjinT34UjinT34
65910
Files are copied correclty to public folder, the main problem with the paths to these files.
– tawreon
Nov 23 '18 at 18:12
add a comment |
Check the documentation about problems with url(...).
It suggests using resolve-url-loader.
Also you can try to use copy-webpack-plugin
answered Nov 23 '18 at 17:14
UjinT34UjinT34
65910
Files are copied correclty to public folder, the main problem with the paths to these files.
– tawreon
Nov 23 '18 at 18:12
add a comment |
Check the documentation about problems with url(...).
It suggests using resolve-url-loader.
Also you can try to use copy-webpack-plugin
answered Nov 23 '18 at 17:14
UjinT34UjinT34
65910
Check the documentation about problems with url(...).
It suggests using resolve-url-loader.
Also you can try to use copy-webpack-plugin
answered Nov 23 '18 at 17:14
UjinT34UjinT34
65910
answered Nov 23 '18 at 17:14
UjinT34UjinT34
65910
answered Nov 23 '18 at 17:14
UjinT34UjinT34
65910
answered Nov 23 '18 at 17:14
UjinT34UjinT34
65910
65910
Files are copied correclty to public folder, the main problem with the paths to these files.
– tawreon
Nov 23 '18 at 18:12
add a comment |
Files are copied correclty to public folder, the main problem with the paths to these files.
– tawreon
Nov 23 '18 at 18:12
Files are copied correclty to public folder, the main problem with the paths to these files.
– tawreon
Nov 23 '18 at 18:12
Files are copied correclty to public folder, the main problem with the paths to these files.
– tawreon
Nov 23 '18 at 18:12
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.
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%2f53450528%2fwebpack-doesnt-create-right-paths-for-images-in-production-css-file%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
