Sass-transformer for pub-serve and pub-build.
1. Install Sass and add it to your path.
2. Add the following lines to your pubspec.yaml:
dependencies:
sass_transformer: any
transformers:
- sass_transformerAfter adding the transformer, all your .sass and .scss files that don't begin with _ will be automatically transformed to
corresponding .css files.
If your main file imports other files outside the main files folder, you need to add the option include_paths,
to let sass know which folder will be used for processing outside imports:
dependencies:
sass_transformer: any
transformers:
- sass_transformer:
include_paths: path/to/folder/with/other/scssyou can have multiple include_paths:
dependencies:
sass_transformer: any
transformers:
- sass_transformer:
include_paths:
- path/to/folder/with/other/scss1
- path/to/folder/with/other/scss2By using
pub serveduring development, css files are going to live in memory only. Executingpub buildcreates actual css files in build folder
3. Finally in the html files you only need to import the generated css files:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="path/to/main.css">
</head>
<body>
<!-- content goes hear -->
</body>
</html>You can also pass options to Sass if necessary:
transformers:
- sass_transformer:
executable: /path/to/sass # Sass executable to use
compass: true # Include compass
line_numbers: true # Include line numbers in output
style: compact # Style of generated CSS
copy_sources: true # Copy original .scss/.sass files to output directoryYou can use SassC instead of normal Sass by specifying executable as 'sassc' (or any path ending with 'sassc'):
transformers:
- sass_transformer:
executable: sassc # or /path/to/sasscSassC only supports .scss-files and does not support Compass.
- UTF8-encoding is assumed for all input files.