Make asset-url() helper work outside of sassc-rails, porting to dart-sass
Because you want to stop using Ruby on Rails' asset pipeline, without throwing your .sass/.scss files away.
Pass it to sass-loader in webpack, or dart-sass option.
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')], }, }, } ] }
- node-sass-asset-functions: dart-sass-rails is inspired by this lib. If you are using node-sass, use that instead.
- 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.