To use dart-sass or node-sass in a Meteor/Vue project, you'll need to follow these steps:

  1. Install the Sass Package: First, you need to install the Sass package in your Meteor project. You can choose either dart-sass or node-sass.

For dart-sass, use:

meteor npm install sass

For node-sass, use:

meteor npm install node-sass
  1. Configure the Meteor Build Plugin: Meteor uses a build plugin called fourseven:scss to compile Sass/Scss files. By default, this package uses node-sass. To use dart-sass, you'll need to configure the plugin accordingly.

In your Meteor project, create a scss.json file in the root directory (if it doesn't exist already). Add the following configuration to use dart-sass:

{ "includePaths": [ "node_modules" ], "implementation": "sass" }

For node-sass, you don't need to create the scss.json file, as it is the default implementation used by the fourseven:scss package.

  1. Import Sass Files: Now you can use Sass/Scss files in your Vue components. Simply create .scss or .sass files and import them into your Vue components as needed.

For example, in your Vue component:

<template> <div> <h1 class="my-title">Hello, World!</h1> </div> </template> <style lang="scss"> @import "my-styles.scss"; .my-title { font-size: 24px; color: $primary-color; // Use Sass variables here } </style>

Make sure to replace "my-styles.scss" with the correct path to your Sass/Scss file.

  1. Build and Run: After making these changes, you should be able to build and run your Meteor/Vue project with either dart-sass or node-sass based on your choice.

Remember that dart-sass and node-sass have slightly different behavior and syntax, so ensure your Sass/Scss code is compatible with the chosen implementation. Also, consider the performance and compatibility of each package when making your choice.

Note: As of my knowledge cutoff in September 2021, dart-sass is recommended because it's actively maintained and will likely become the default implementation in future Meteor versions. However, it's always good to check the latest recommendations and updates from the Meteor community.

Have questions or queries?
Get in Touch