Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialPierre Smith
11,842 Pointswebpack compiles but the styles aren't loading...
Here is my devDependacies
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"style-loader": "^0.18.1",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
},
here is my config file
const path = require( 'path' )
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
},
{
test: /\.css$/,
exclude: /node_modules/,
loader:['style-loader','css-loader'],
// loader:'style-loader!css-loader',
}
]
},
}
and my import statement in my app.js file is
import './assets/app.css'
why isn't the styles loading
3 Answers
Pierre Smith
11,842 PointsIf you check out my workspaces snapshot you'll see that I decided to go ahead and add a build folder. when adding the script in the HTML page I thought that I would have to specify in the src attribute ./build/bundle.js
but apparently, I did not once I switched it from that to just bundle.js
it worked!
Iain Simmons
Treehouse Moderator 32,305 PointsAhh, it looks like you're running Webpack version 2, but still using some of the version 1 syntax.
If you want to keep using version 2, try these steps and this syntax: css-loader.
You might also want to read the guide on Migrating from v1 to v2
Iain Simmons
Treehouse Moderator 32,305 PointsTry dropping the -loader
suffix in the array of loaders. I thought it accepted all the different variations of suffixed, arrays and exclamation mark delimited strings, but maybe not?
Otherwise, can you please share a snapshot of your workplace if using one, or just a bit more information about the structure of your project?
Pierre Smith
11,842 PointsThe loader prefix must be there according to webpack. but i'll share my code through workspaces
Pierre Smith
11,842 Pointshere is the snapshot https://w.trhou.se/kf7trl061b not all of the node_modules are there
Pierre Smith
11,842 PointsIt recognizes the file as in "it refreshes when I save my changes in the CSS file but none of them are actually being applied
Iain Simmons
Treehouse Moderator 32,305 PointsCan you paste the output HTML when you view it in the browser? It should have a <style>
tag in the <head>