Passing additional config to sass compiler

[Niedzwiedzw]

in order to allow for absolute-project-root-path imports in my scss files I need to pass some additional config to the sass compiler. Examples are shown here https://stackoverflow.com/questions/42865697/scss-import-relative-to-root

can I do that with trunk somehow?

[dnaka91]

Currently, trunk doesn't allow passing any arguments to dart-sass (the compiler we use). But that's definitely a good idea.

I think it wouldn't make sense to create an extra option directly in trunk for every option of dart-sass. Maybe something similar to how cargo has rustflags, as a new option for the Trunk.toml settings file.

Example

[build]
sass-flags = ["--load-path", "my/custom/import/path"]

These would be prepended to the arguments we already set on our own, so you can potentially create a build error by having duplicate arguments (or dart-sass just swallows all args and uses only the last defined one, not sure about how they handle this).

[JamesMcGuigan]

I had technical issues getting SASS working with Yew, so wrote my own sass watch script using grass. Not sure where this should be documented.

grass.sh

#!/usr/bin/env bash
cd $(dirname $BASH_SOURCE[0]);  # cd current directory
# BUGFIX: <link data-trunk rel="scss" href="src/counter.scss"/> fails to compile
# WORKAROUND: ./grass.sh is called as a watch/build [hook] in Trunk.toml
if [[ ! `command -v grass` ]]; then cargo install grass; fi

# Lazy compile with caching
# Find all .scss + .sass files, newer than .css (or if .css missing), then compile through grass
function grass_cached () {
  SCSS=$1
  CSS=$(echo $SCSS | sed 's/\.s[ac]ss$/.css/')
  if [ ! -f $CSS ] || [ "$SCSS" -nt "$CSS" ]; then
    echo "grass '$SCSS' > '$CSS'";
    grass "$SCSS" > "$CSS";
  fi;
}
export -f grass_cached
find . -name '*.s[ac]ss' | xargs -P0 -I{} bash -c 'grass_cached "$@"' _ {}


## BUG: GNU Parallel is not preinstalled on AWS - use xargs instead
#CSS='{=1 s/\.s[ac]ss$/.css/ =}'
#find . -name '*.s[ac]ss' |
#  parallel --group "if [ ! -f $CSS ] || [ {1} -nt $CSS ]; then echo 'grass {1} > $CSS'; grass {1} > $CSS; fi;"

Cargo.toml

[dev-dependencies]
grass = "0.11.0"

Trunk.toml

[[hooks]]
stage = "pre_build"
command = "./grass.sh"
command_arguments = []

.gitignore

# Build = grass.sh
*.css

index.html

<link data-trunk rel="css" href="css/global.css"/>

$ grass --help

grass --help
grass 0.11.0
A near-feature-complete Sass compiler written purely in Rust

USAGE:
    grass [FLAGS] [OPTIONS] <INPUT> [--] [OUTPUT]

FLAGS:
        --no-charset    Don't emit a @charset or BOM for CSS with non-ASCII characters.
        --no-unicode    Whether to use Unicode characters for messages.
    -q, --quiet         Don't print warnings.
        --stdin         Read the stylesheet from stdin
    -h, --help          Prints help information
    -v, --version       Prints version information

OPTIONS:
    -I, --load-path <LOAD_PATH>...    A path to use when resolving imports. May be passed multiple times.
    -s, --style <STYLE>               Minified or expanded output [default: expanded]  [possible values:
                                      Expanded, Compressed]

ARGS:
    <INPUT>     SCSS files
    <OUTPUT>    Output SCSS file

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.