Setting a sass includePath to a sub-directory

[jrochkind]

It took me a while to figure this out, so I figured I'd document it for others who might be interested, and I'm also interested in feedback:

• Is this a bad idea, should I not do it?
• Is there a better way to do it?

Context

I have a Rails app, where I am working on using vite for both JS and CSS, including sass/SCSS. My source files end up set up like this:

app
  frontend
     application.js
     application.scss
  javascript
    ...
  stylesheets
     _example.scss

In application.scss, I wants to do an SCSS @import of _example.scss. (along with many more similar)

This does work:

// ./app/frontend/application.scss
@import '../stylesheets/example'

But I was not really loving the need to put that relative ../ in there every time. And no kind of absolute path at all seemed to work.

// ./app/frontend/application.scss

# NOT WORKING
@import 'frontend/stylesheets/example'
@import 'stylesheets/example'
@import '/frontend/stylesheets/example'
@import '/stylesheets/example'
# NONE OF THEM

A Solution

If we can set SASS load paths to a directory we wanted, can we get just @import 'example' to work? That's basically what was going on in the webpacker setup I am porting from, can we match it?

It turns out, yes, like this, with the somewhat obscure/under-documented vite config setting, and some js for calculating relative paths to config file.

// vite.config.ts

import { join } from 'path'

export default defineConfig({
  # ..
    css: {
      preprocessorOptions: {
        scss: {
          includePaths: [join(__dirname, '/app/frontend/stylesheets')]
        }
      }
    }
}

Bingo, it seems to work!

./app/frontend/entrypoints/application.scss can just @import 'example', and it now successfully imports ./app/frontend/stylesheets/_example.scss

This is similar/analogous to how things were working under webpacker for me.

Feedback?

I am new to vite and not an expert in javascript build processes generally!

Is this a bad idea? Should i just resign myself to only doing SCSS imports with relative paths like @import '../stylesheets/example'?

Or is there a better way to set something like this up? Appreciate any feedback!

[jrochkind]

(oops, one improvement already, realized there was no purpose at all to the ruby vite.rb above, when Rails.root wasn't available anyway, and we were just calculating a relative file path... we can do that in the vite.config.ts directly. Editing, so by the time you see this it might refer to something you don't see anymore anyway).

[ElMassimo]

Also, for other cases, vite-plugin-ruby conveniently exposes that variable:

import { projectRoot } from 'vite-plugin-ruby'

[ElMassimo]

Nothing wrong with configuring includePaths, though it is sass-specific.

A generic approach to use "absolute" paths, is to leverage import aliases as mentioned in the docs.

For example, if you add:

export default defineConfig({
  resolve: {
    alias: {
      '@stylesheets': resolve(__dirname, 'app/stylesheets'),
    },
  },
})

You should then be able to use:

@import '@stylesheets/example'

The advantage is that this works for both CSS and JS files, regardless of which pre-processor is used.

---

When importing files from outside the sourceCodeDir, make sure to add them to watchAdditionalPaths, to ensure changes to those files invalidate the cache.

[jrochkind]

Thank you for your repsonse! It's super useful to be able to bounce this off someone who understands the ins and outs here.

You know... I think just using a @stylesheets alias is preferable after all. At first I was for some reason caught on making it match our previous setup, where it just magically included the dir in the load paths.... but looking at how it ended up, and comparing to just using the resolve alias... I think the resolve alias is more clear, more vite standard, simpler -- and like you point out will work universally in vite, not just in sass, and it does seem likely that at some point I'll need/want to refer to there from somewhere other than sass.

Slightly longer paths, "@stylesheets/whatever instead of whatever is worth it for doing it a more conventional way for vite. Thanks!