https://github.com/fsubal/dart-sass-rails

Make asset-url() helper work outside of sassc-rails, porting to dart-sass
https://github.com/fsubal/dart-sass-rails

dart-sass rails sass webpack

Last synced: 27 days ago
JSON representation

Make asset-url() helper work outside of sassc-rails, porting to dart-sass

• Host: GitHub
• URL: https://github.com/fsubal/dart-sass-rails
• Owner: fsubal
• Created: 2020-04-04T13:05:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T18:30:27.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T07:43:29.854Z (7 months ago)
• Topics: dart-sass, rails, sass, webpack
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/dart-sass-rails
• Size: 355 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# dart-sass-rails

Make `asset-url()` helper work outside of sassc-rails, porting to dart-sass

### Why?

Because you want to stop using Ruby on Rails' asset pipeline, without throwing your .sass/.scss files away.

### How to use

Pass it to sass-loader in webpack, or dart-sass option.

```js

import sass from 'sass';

import { dartSassRails } from 'dart-sass-rails';

{

    test: /\.(scss|sass|css)$/i,

    use: [

        MiniCssExtractPlugin.loader,

        {

            loader: "css-loader",

            options: {},

        },

        {

            loader: "resolve-url-loader",

            // Required if you use resolve-url-loader 3.0+

            options: {

                root: "",

            }

        },

        {

            loader: 'sass-loader',

            options: {

                sourceMap: true,

                implementation: sass,

                sassOptions: {

                    functions: dartSassRails({

                        assetRootPath: path.join(railsRoot, 'app', 'assets'),

                        imagesPath: '/images',

                        fontsPath: '/fonts',

                    }),

                    includePaths: [path.join(railsRoot, 'app', 'assets', 'stylesheets')],

                },

            },

        }

    ]

}

```

### See also

- [node-sass-asset-functions](https://github.com/fetch/node-sass-asset-functions): dart-sass-rails is inspired by this lib. If you are using node-sass, use that instead.

- [resolve-url-loader](https://github.com/bholloway/resolve-url-loader): should be used alongside with dart-sass-rails. Currently dart-sass-rails emits full file paths for `url()`, and resolve-url-loader transforms to proper urls.