DEV Community

loading...
Cover image for Webpacker 6: SCSS/Sass Loaders

Webpacker 6: SCSS/Sass Loaders

Andrew Mason
Andrew Mason is a full stack Ruby on Rails engineer and content creator in the Ruby community.
Originally published at andrewm.codes Updated on ・1 min read

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.

Discussion (1)

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.