Webpack not loading css
This is my first time trying to set up Webpack, so I'm sure I'm missing something here.
I am trying to load my PostCSS files with Webpack, using the ExtractTextPlugin to generate a css file into "dist". The problem is Webpack does not seem to pick up the css files. They are under "client/styles", but I've tried moving them to "shared", with the same result.
I ran Webpack with the --display-modules option, and verified that no css files display there.
I have tried running it without the extract text plugin, and the result is the same: no CSS is built into bundle.js.
Here is my prod config:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: [
'./client'
],
resolve: {
modulesDirectories: ['node_modules', 'shared'],
extensions: ['', '.js', '.jsx', '.css']
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: '/'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
},
{
test: /.css?$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader'
),
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
],
postcss: (webpack) => [
require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }),
require('postcss-url')(),
require('precss')(),
require('postcss-fontpath')(),
require('autoprefixer')({ browsers: [ 'last 2 versions' ] })
]
};
And here's an example of my main css file:
@import 'normalize.css/normalize';
/* Variables */
@import 'variables/colours';
/* Mixins */
/* App */
/* Components */
body {
background-color: $black;
}
Would anyone have an idea on why this is happening? Am I missing something?
Thank you
javascript css webpack postcss
asked Jan 23 '16 at 11:47
ClaudiaClaudia
403147
add a comment |
This is my first time trying to set up Webpack, so I'm sure I'm missing something here.
I am trying to load my PostCSS files with Webpack, using the ExtractTextPlugin to generate a css file into "dist". The problem is Webpack does not seem to pick up the css files. They are under "client/styles", but I've tried moving them to "shared", with the same result.
I ran Webpack with the --display-modules option, and verified that no css files display there.
I have tried running it without the extract text plugin, and the result is the same: no CSS is built into bundle.js.
Here is my prod config:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: [
'./client'
],
resolve: {
modulesDirectories: ['node_modules', 'shared'],
extensions: ['', '.js', '.jsx', '.css']
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: '/'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
},
{
test: /.css?$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader'
),
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
],
postcss: (webpack) => [
require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }),
require('postcss-url')(),
require('precss')(),
require('postcss-fontpath')(),
require('autoprefixer')({ browsers: [ 'last 2 versions' ] })
]
};
And here's an example of my main css file:
@import 'normalize.css/normalize';
/* Variables */
@import 'variables/colours';
/* Mixins */
/* App */
/* Components */
body {
background-color: $black;
}
Would anyone have an idea on why this is happening? Am I missing something?
Thank you
javascript css webpack postcss
asked Jan 23 '16 at 11:47
ClaudiaClaudia
403147
add a comment |
This is my first time trying to set up Webpack, so I'm sure I'm missing something here.
I am trying to load my PostCSS files with Webpack, using the ExtractTextPlugin to generate a css file into "dist". The problem is Webpack does not seem to pick up the css files. They are under "client/styles", but I've tried moving them to "shared", with the same result.
I ran Webpack with the --display-modules option, and verified that no css files display there.
I have tried running it without the extract text plugin, and the result is the same: no CSS is built into bundle.js.
Here is my prod config:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: [
'./client'
],
resolve: {
modulesDirectories: ['node_modules', 'shared'],
extensions: ['', '.js', '.jsx', '.css']
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: '/'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
},
{
test: /.css?$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader'
),
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
],
postcss: (webpack) => [
require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }),
require('postcss-url')(),
require('precss')(),
require('postcss-fontpath')(),
require('autoprefixer')({ browsers: [ 'last 2 versions' ] })
]
};
And here's an example of my main css file:
@import 'normalize.css/normalize';
/* Variables */
@import 'variables/colours';
/* Mixins */
/* App */
/* Components */
body {
background-color: $black;
}
Would anyone have an idea on why this is happening? Am I missing something?
Thank you
javascript css webpack postcss
asked Jan 23 '16 at 11:47
ClaudiaClaudia
403147
This is my first time trying to set up Webpack, so I'm sure I'm missing something here.
I am trying to load my PostCSS files with Webpack, using the ExtractTextPlugin to generate a css file into "dist". The problem is Webpack does not seem to pick up the css files. They are under "client/styles", but I've tried moving them to "shared", with the same result.
I ran Webpack with the --display-modules option, and verified that no css files display there.
I have tried running it without the extract text plugin, and the result is the same: no CSS is built into bundle.js.
Here is my prod config:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: [
'./client'
],
resolve: {
modulesDirectories: ['node_modules', 'shared'],
extensions: ['', '.js', '.jsx', '.css']
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: '/'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
},
{
test: /.css?$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader'
),
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
],
postcss: (webpack) => [
require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }),
require('postcss-url')(),
require('precss')(),
require('postcss-fontpath')(),
require('autoprefixer')({ browsers: [ 'last 2 versions' ] })
]
};
And here's an example of my main css file:
@import 'normalize.css/normalize';
/* Variables */
@import 'variables/colours';
/* Mixins */
/* App */
/* Components */
body {
background-color: $black;
}
Would anyone have an idea on why this is happening? Am I missing something?
Thank you
javascript css webpack postcss
javascript css webpack postcss
asked Jan 23 '16 at 11:47
ClaudiaClaudia
403147
asked Jan 23 '16 at 11:47
ClaudiaClaudia
403147
asked Jan 23 '16 at 11:47
ClaudiaClaudia
403147
asked Jan 23 '16 at 11:47
ClaudiaClaudia
403147
asked Jan 23 '16 at 11:47
ClaudiaClaudia
403147
403147
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Since you are using style-loader and css-loader. You can include css in the js file itself. You can just require(style.css) or import 'style.css' (if using ES6) in the javascript file which is using the styles. No need to provide an entry point to webpack for css.
Hope it helps.
edited Nov 23 '18 at 3:52
Julxzs
5001520
answered Jan 23 '16 at 13:00
sandeepsandeep
1,4501411
Thank you for the tip. :) In my case, I'm dealing with an isomorphic application, so I need the styles to load before the JS, or else there will be a FOUC. However, will keep that in mind for other situations.
– Claudia
Jan 24 '16 at 7:59
Then use have a look atisomorphic style loader, it solves the FOUC issue. It is an extension of style loader for isomorphic apps.
– sandeep
Jan 24 '16 at 14:06
add a comment |
So, after three hours of hitting my head against the wall, I finally got it. I hope this will help someone in the future.
All I needed to do was to add './client/styles/main.css' to the entry points. Yey.
edited Aug 28 '16 at 12:36
simeg
1,52122032
answered Jan 23 '16 at 12:27
ClaudiaClaudia
403147
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%2f34963051%2fwebpack-not-loading-css%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
Since you are using style-loader and css-loader. You can include css in the js file itself. You can just require(style.css) or import 'style.css' (if using ES6) in the javascript file which is using the styles. No need to provide an entry point to webpack for css.
Hope it helps.
edited Nov 23 '18 at 3:52
Julxzs
5001520
answered Jan 23 '16 at 13:00
sandeepsandeep
1,4501411
Thank you for the tip. :) In my case, I'm dealing with an isomorphic application, so I need the styles to load before the JS, or else there will be a FOUC. However, will keep that in mind for other situations.
– Claudia
Jan 24 '16 at 7:59
Then use have a look atisomorphic style loader, it solves the FOUC issue. It is an extension of style loader for isomorphic apps.
– sandeep
Jan 24 '16 at 14:06
add a comment |
Since you are using style-loader and css-loader. You can include css in the js file itself. You can just require(style.css) or import 'style.css' (if using ES6) in the javascript file which is using the styles. No need to provide an entry point to webpack for css.
Hope it helps.
edited Nov 23 '18 at 3:52
Julxzs
5001520
answered Jan 23 '16 at 13:00
sandeepsandeep
1,4501411
Thank you for the tip. :) In my case, I'm dealing with an isomorphic application, so I need the styles to load before the JS, or else there will be a FOUC. However, will keep that in mind for other situations.
– Claudia
Jan 24 '16 at 7:59
Then use have a look atisomorphic style loader, it solves the FOUC issue. It is an extension of style loader for isomorphic apps.
– sandeep
Jan 24 '16 at 14:06
add a comment |
Since you are using style-loader and css-loader. You can include css in the js file itself. You can just require(style.css) or import 'style.css' (if using ES6) in the javascript file which is using the styles. No need to provide an entry point to webpack for css.
Hope it helps.
edited Nov 23 '18 at 3:52
Julxzs
5001520
answered Jan 23 '16 at 13:00
sandeepsandeep
1,4501411
Since you are using style-loader and css-loader. You can include css in the js file itself. You can just require(style.css) or import 'style.css' (if using ES6) in the javascript file which is using the styles. No need to provide an entry point to webpack for css.
Hope it helps.
edited Nov 23 '18 at 3:52
Julxzs
5001520
answered Jan 23 '16 at 13:00
sandeepsandeep
1,4501411
edited Nov 23 '18 at 3:52
Julxzs
5001520
edited Nov 23 '18 at 3:52
Julxzs
5001520
edited Nov 23 '18 at 3:52
Julxzs
5001520
5001520
answered Jan 23 '16 at 13:00
sandeepsandeep
1,4501411
answered Jan 23 '16 at 13:00
sandeepsandeep
1,4501411
answered Jan 23 '16 at 13:00
sandeepsandeep
1,4501411
1,4501411
Thank you for the tip. :) In my case, I'm dealing with an isomorphic application, so I need the styles to load before the JS, or else there will be a FOUC. However, will keep that in mind for other situations.
– Claudia
Jan 24 '16 at 7:59
Then use have a look atisomorphic style loader, it solves the FOUC issue. It is an extension of style loader for isomorphic apps.
– sandeep
Jan 24 '16 at 14:06
add a comment |
Thank you for the tip. :) In my case, I'm dealing with an isomorphic application, so I need the styles to load before the JS, or else there will be a FOUC. However, will keep that in mind for other situations.
– Claudia
Jan 24 '16 at 7:59
Then use have a look atisomorphic style loader, it solves the FOUC issue. It is an extension of style loader for isomorphic apps.
– sandeep
Jan 24 '16 at 14:06
Thank you for the tip. :) In my case, I'm dealing with an isomorphic application, so I need the styles to load before the JS, or else there will be a FOUC. However, will keep that in mind for other situations.
– Claudia
Jan 24 '16 at 7:59
Thank you for the tip. :) In my case, I'm dealing with an isomorphic application, so I need the styles to load before the JS, or else there will be a FOUC. However, will keep that in mind for other situations.
– Claudia
Jan 24 '16 at 7:59
Then use have a look at
isomorphic style loader, it solves the FOUC issue. It is an extension of style loader for isomorphic apps.– sandeep
Jan 24 '16 at 14:06
Then use have a look at
isomorphic style loader, it solves the FOUC issue. It is an extension of style loader for isomorphic apps.– sandeep
Jan 24 '16 at 14:06
add a comment |
So, after three hours of hitting my head against the wall, I finally got it. I hope this will help someone in the future.
All I needed to do was to add './client/styles/main.css' to the entry points. Yey.
edited Aug 28 '16 at 12:36
simeg
1,52122032
answered Jan 23 '16 at 12:27
ClaudiaClaudia
403147
add a comment |
So, after three hours of hitting my head against the wall, I finally got it. I hope this will help someone in the future.
All I needed to do was to add './client/styles/main.css' to the entry points. Yey.
edited Aug 28 '16 at 12:36
simeg
1,52122032
answered Jan 23 '16 at 12:27
ClaudiaClaudia
403147
add a comment |
So, after three hours of hitting my head against the wall, I finally got it. I hope this will help someone in the future.
All I needed to do was to add './client/styles/main.css' to the entry points. Yey.
edited Aug 28 '16 at 12:36
simeg
1,52122032
answered Jan 23 '16 at 12:27
ClaudiaClaudia
403147
So, after three hours of hitting my head against the wall, I finally got it. I hope this will help someone in the future.
All I needed to do was to add './client/styles/main.css' to the entry points. Yey.
edited Aug 28 '16 at 12:36
simeg
1,52122032
answered Jan 23 '16 at 12:27
ClaudiaClaudia
403147
edited Aug 28 '16 at 12:36
simeg
1,52122032
edited Aug 28 '16 at 12:36
simeg
1,52122032
edited Aug 28 '16 at 12:36
simeg
1,52122032
1,52122032
answered Jan 23 '16 at 12:27
ClaudiaClaudia
403147
answered Jan 23 '16 at 12:27
ClaudiaClaudia
403147
answered Jan 23 '16 at 12:27
ClaudiaClaudia
403147
403147
add a comment |
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%2f34963051%2fwebpack-not-loading-css%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
