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 trial

JavaScript Adding CSS Loaders

Pierre Smith
Pierre Smith
11,842 Points
Posted by Pierre Smith
Pierre Smith
11,842 Points

webpack 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
Pierre Smith
11,842 Points
Pierre Smith
Pierre Smith
11,842 Points

If 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
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Ahh, 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
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Try 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
Pierre Smith
11,842 Points
Pierre Smith
Pierre Smith
11,842 Points

The loader prefix must be there according to webpack. but i'll share my code through workspaces

Pierre Smith
Pierre Smith
11,842 Points
Pierre Smith
Pierre Smith
11,842 Points

here is the snapshot https://w.trhou.se/kf7trl061b not all of the node_modules are there

Pierre Smith
Pierre Smith
11,842 Points
Pierre Smith
Pierre Smith
11,842 Points

It 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
Iain Simmons
Treehouse Moderator 32,305 Points

Can you paste the output HTML when you view it in the browser? It should have a <style> tag in the <head>