Repository files navigation

This loader will load your Sass resources into everyrequired Sass module. So you can use your shared variables, mixins and functions across all Sass styles without manually loading them in each file.

This project is sponsored by the software consulting firmShakaCode, creator of theReact on Rails Gem.

ShakaCode focuses on helping Ruby on Rails teams use React and Webpack better. We can upgrade your project and improve your development and customer experiences, allowing you to focus on building new features or fixing bugs instead.

For an overview of working with us, see ourClient Engagement Model article andhow we bill for time.

We also specialize in helping development teams lower infrastructure and CI costs. Check out our projectControl Plane Flow, which can allow you to get the ease of Heroku with the power of Kubernetes and big cost savings.

If you think ShakaCode can help your project,click here to book a call withJustin Gordon, the creator of React on Rails and Shakapacker.

Here's a testimonial of how ShakaCode can help fromFlorian Gößler ofBlinkist, January 2, 2023:

Hey Justin 👋

I just wanted to let you know that we today shipped the webpacker to shakapacker upgrades and it all seems to be running smoothly! Thanks again for all your support and your teams work! 😍

On top of your work, it was now also very easy for me to upgrade Tailwind and include our external node_module based web component library which we were using for our other (more modern) apps already. That work is going to be shipped later this week though as we are polishing the last bits of it. 😉

Have a great 2023 and maybe we get to work together again later in the year! 🙌

Read thefull review here.

• Made to work with CSS Modules!
• This loader is not limited to Sass resources. It supposedly works with less, post-css, etc. perissue 31.
• SupportsWebpack 5
• Supports Sass@use syntax. You must use Dart Sass (sass, notnode-sass npm package). See thehoistUseStatements option.

Get it via npm:

npm install sass-resources-loader

Create your file (or files) with resources, which are snippets of Sass that you want available to places like CSS modules Sass:

/* resources.scss*/$section-width:700px;@mixinsection-mixin {margin:0auto;width:$section-width;}

Specify resources, contents of which will be prepended to each file.

For example, if variable$my-variable: #fff is in fileexample/a.scss, specify this file as a resource in yourwebpack.config.js

{loader:'sass-resources-loader',options:{resources:'example/a.scss'}}

to prepend this variable

// Entry file$my-variable:#fff;// Entry file's content go here

Tells the compiler if an existing@use statement is found in entry file, it should be hoisted to the top.The reason is that@use must go before most other declarations, except variable declarations, per thedocs.

If our entry file has the following content

// Entry file@use'my/definitions/file';@use'my/other/definitions/file';// Entry file's contents go here

and our resource file contains this

$my-variable:#fff;@mixinsome-mixin {color:#000;}

then the output, withhoistUseStatements set totrue, would be the following.Note that the@use statements are above the inclusion of resources.

// Entry file@use'my/definitions/file';@use'my/other/definitions/file';// Resources$my-variable:#fff;@mixinsome-mixin {color:#000;}// Rest of entry file's content goes here

You can also use this multi-line syntax:

@use'config'with ($text-color:#FAFAFA);

See./test/scss/hoist-multiline.scss for an example.

As mentioned in thedocs for Sass @use, you don't need to hoist if your "resources"only contains variable definitions.

If you get the error:

SassError: @use rules must be written before any other rules.

then you need to use thehoistUseStatements: true option.

• Do not include anything that will be actually rendered in CSS, because it will be added to every imported Sass file.
• Avoid using Sass import rules inside resources files as it slows down incremental builds. Add imported files directly insassResources array in webpack config instead. If you concerned about location of your resources index, you might want to check out the solution outlined inthis comment.
• If you still want to use Sass import rules make sure your paths are relative to the file they defined in (basically, your file with resources), except the ones started with~ (~ is resolved tonode_modules folder).

Apply loader in webpack config (v1.x.x &v2.x.x are supported) and provide path to the file with resources:

/* Webpack@2: webpack.config.js */module:{rules:[// Apply loader{test:/\.scss$/,use:['style-loader','css-loader','postcss-loader','sass-loader',{loader:'sass-resources-loader',options:{// Provide path to the file with resourcesresources:'./path/to/resources.scss',// Or array of pathsresources:['./path/to/vars.scss','./path/to/mixins.scss','./path/to/functions.scss']},},],},],},/* Webpack@1: webpack.config.js */module:{loaders:[// Apply loader{test:/\.scss$/,loader:'style!css!sass!sass-resources'},],},// Provide path to the file with resourcessassResources:'./path/to/resources.scss',// Or array of pathssassResources:['./path/to/vars.scss','./path/to/mixins.scss'],

NOTE: IfwebpackConfig.context is not defined,process.cwd() will be used to resolve files with resource.

Now you can use these resources without manually loading them:

/* component.scss*/.section {@includesection-mixin;// <--- `section-mixin` is defined here}

importReactfrom'react';importcssfrom'./component.scss';// ...render(){return(<divclassName={css.section}/>);}

You can specify glob patterns to match all of your files in the same directory.

// Specify a single pathresources:'./path/to/resources/**/*.scss',// will match all files in folder and subdirectories// or an array of pathsresources:['./path/to/resources/**/*.scss','./path/to/another/**/*.scss']

Note thatsass-resources-loader will resolve your files in order. If you want your variables to be accessed across all of your mixins you should specify them in first place.

resources:['./path/to/variables/vars.scss','./path/to/mixins/**/*.scss']

• react-webpack-rails-tutorial, live example atwww.reactrails.com.
• bootstrap-loader

  module: {    rules: [      {        test: /\.vue$/,        use: 'vue-loader'      },      {        test: /\.css$/,        use: [          { loader: 'vue-style-loader' },          { loader: 'css-loader', options: { sourceMap: true } },        ]      },      {        test: /\.scss$/,        use: [          { loader: 'vue-style-loader' },          { loader: 'css-loader', options: { sourceMap: true } },          { loader: 'sass-loader', options: { sourceMap: true } },          { loader: 'sass-resources-loader',            options: {              sourceMap: true,              resources: [                resolveFromRootDir('src/styles/variables.scss'),              ]            }          }        ]      }    ]  }

If you wish to use this loader in theVueJS Webpack template you need to add the following code inbuild/utils.js after line 42 :

if(loader==='sass'){loaders.push({loader:'sass-resources-loader',options:{resources:'path/to/your/file.scss',},});}

If you are using vue-cli@3, you need to create avue.config.js file in your project root (next topackage.json). Then, add the following code:

// vue.config.jsmodule.exports={chainWebpack:config=>{constoneOfsMap=config.module.rule('scss').oneOfs.storeoneOfsMap.forEach(item=>{item.use('sass-resources-loader').loader('sass-resources-loader').options({// Provide path to the file with resourcesresources:'./path/to/resources.scss',// Or array of pathsresources:['./path/to/vars.scss','./path/to/mixins.scss','./path/to/functions.scss']}).end()})}}

This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to thecode of conduct.

SeeContributing to get started.

sass-resources-loader is available under MIT. SeeLICENSE for more details.

The following companies support our open source projects, and ShakaCode uses their products!