DEV Community

Cover image for Webpacker 6: SCSS/Sass Loaders
Andrew Mason
Andrew Mason

Posted on • Updated on • Originally published at andrewm.codes

Webpacker 6: SCSS/Sass Loaders

In order to process .scss and .sass files with Webpacker 6, you need to add sass-loader and sass.

Note: This section builds on the CSS section

Install

yarn add sass-loader sass
Enter fullscreen mode Exit fullscreen mode

Usage

You should be able to use the same pack tag that you added for CSS.

Make sure you restart bin/webpack-dev-server after installing new loaders.

Style Loader Example

<%# app/views/layouts/application.html.erb %>

+ <%= stylesheet_packs_with_chunks_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

Extract Example

<%# app/views/layouts/application.html.erb %>

<%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode
// app/javascript/packs/application.js

+ import "./application.scss"
Enter fullscreen mode Exit fullscreen mode

Verify

Note: Make sure you restart the dev server!

Let’s create a new SCSS file:

touch app/javascript/packs/application.scss
Enter fullscreen mode Exit fullscreen mode

Next, add some SCSS:

/* app/javascript/packs/application.scss */

$body-background: #fafafa;
$body-color: #444;

body {
  background: $body-background;
  color: $body-color;
  font-family: sans-serif;
}

h1,
nav,
footer {
  text-align: center;
}

main {
  margin: 4rem auto;
  max-width: 60rem;
}
Enter fullscreen mode Exit fullscreen mode

Reload your browser and your styles should be applied now, and the Webpacker loader error should be gone.

Top comments (3)

Collapse
 
juanvqz profile image
Juan Vasquez

nothing to do here! it just works. 💚

BTW, I had the sass-rails gem installed and I removed it too. now webpacker is in charge of sass files.

Collapse
 
stefanobandeira profile image
Stéfano M Bandeira

Thanks for the help Andrew !!!!

Collapse
 
kwerle profile image
Kurt Werle

But it looks like this does not address rails generators?
rails g controllerMyController will still generate a .css?