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

Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Posted by Natasha McDiarmid
Natasha McDiarmid
11,400 Points

How-to use @import (sass) with react?

I'm learning React, coming from a front-end WordPress background.

I'm using npm instead of webpack because I'm just trying to get my head around the basics.

I used this to install within my project: npm install node-sass

I have my sass file setup, but when I try to add my @imports like I typically do in projects, it's rejecting it with this error:

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

I use sass for common, global styles, like spacing, shadows and animations.

–––

Here is my .sass file:

@import 'mixins'
@import 'colours'
@import 'fonts'
@import 'base'
@import 'layout'

My layout.js file includes this:

import "./styles/sass/style.sass"

–––

So my question is: how do you add @import rules on sass files when you're not using webpack with a config file?

2 Answers

Corina Meyer
Corina Meyer
9,990 Points
Corina Meyer
Corina Meyer
9,990 Points

You say you use npm instead of webpack. Since these are not really interchangeable, a bit more information on how you do that would be helpful - npm is a package manager for handling dependencies you need for your project and webpack is a bundler to build static files from your project.

The error message you pastet looks like you are using webpack. Webpack tries to translate the files it finds in your project. For this it uses a concept called loader. For different types of files it needs specific loaders. As of version 4 of webpack, you do not need to specify a config file to handle the most common types. Unfortunately, sass is none of these, so you need to tell webpack, how to handle these files.

You can find a how-to on that in the webpack documentation: https://webpack.js.org/loaders/sass-loader/

Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Natasha McDiarmid
Natasha McDiarmid
11,400 Points

I suppose I misunderstood the tutorial I was following regarding web-pack and NPM. I think I just meant I wasn't using a config file. Apologies for my lack of understanding.

  1. I followed the link you supplied and installed this within my project: npm install sass-loader node-sass webpack --save-dev
  2. I already had the loader: import "./styles/sass/style.sass"
  3. I create a file called: webpack.config.js in my root
  4. I added the code they provided:
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

–––

When I go to view my project in the browser, my sass isn't compiling.

How do I run it?