CODEWITHSUNDEEP
meteorsass
johann1301s
johann1301s

Reputation: 534

Does meteor ignore/omit preprocessed sass/styl/scss files on build?

im using the fourseven:scss package for meteor in order to use scss in my meteor project.

The .scss files are stored in the client folder together with all .js and .html files.

My concern is that meteor includes all my .scss files on build, so that there is an excess of data sent to the client in runtime. ie. it sends the .css and the .scss.

I don't want meteor to include any of the scss files, only the css files.

have tried reading the docs on atmosphere for the fourseven package, and the meteor build docs on the meteor site. But im still unsure whether the .scss files are included or not.

Does anyone have any ideas on how to know for sure?

Upvotes: 0

Views: 207

Answers (1)

Jankapunkt
Jankapunkt

Reputation: 8423

The Meteor guide for compiling styles says the following:

In Meteor, each of your .scss, .less, or .styl source files will be one of two types: “source” or “import”.

A “source” file is evaluated eagerly and adds its compiled form to the CSS of the app immediately.

An “import” file is evaluated only if imported from some other file and can be used to share common mixins and variables between different CSS files in your app.

So what you basically want is to mark your files as import files, so that they are only evaluated when imported.

The documentation of fourseven:scss offers you a way to do that:

Sass imports/partials, which are:

  • files that are prefixed with an underscore _

  • marked as isImport: true in the package's package.js file: api.addFiles('x.scss', 'client', {isImport: true})

  • Starting from Meteor 1.3, all files in a directory named imports/

So in order to achive your desired outcome you should mark them as imports by using one of the provided method.

A note on that:

Don't forget, that the files that are included will be compiled into css, as the linked guide describes. So in the final build for production will be only css no scss.

Another note:

You can verify yourself by running your local Meteor app and check the following folder content:

<projectPath>/.meteor/local/build/programs/web.browser

The structure and the content of that folder represents a local build where also preprocessors to compile styles etc. have been run. Here you can at least manually verify if the desired output files have been created.

Upvotes: 1

Related Questions