SASS instead of SCSS

Pedro_Ferrari · August 20, 2017, 12:51am

Hi there

I am really used to SASS syntax, and I wish I could use it instead of SCSS that came built with the Sage 9 pack. Is there any way I can switch it?
I am assuming that would require some changes in the webpack config.js, all scss filenames and change the syntax from all files.

The former is the one I am not sure how to do, and also, I am not sure if there is anything else I didn’t think about. Would anyone be so kind as to guide me over this?

Thanks!

Tonzr · December 8, 2017, 8:49am

Did you find any solution for this? I’m also seeking a way to convert to SASS in Roots 9 with webpack. In the older version with Gullp this was fairly simpel.

Stephen · December 8, 2017, 10:40am

I replaced SCSS with Stylus in Sage 9 so changing to SASS should be even easier since you shouldn’t have to install any extra libraries.

I haven’t tried this myself but I would start by changing this line so you have test: /\.sass$/, if you want to use that as your new extension:

github.com

roots/sage/blob/c2a7b5edd0d95a1b775952d3463e78d8fbcaac86/resources/assets/build/webpack.config.js#L78


      {
        loader: 'postcss', options: {
          config: { path: __dirname, ctx: config },
          sourceMap: config.enabled.sourceMaps,
        },
      },
    ],
  }),
},
{
  test: /\.scss$/,
  include: config.paths.assets,
  use: ExtractTextPlugin.extract({
    fallback: 'style',
    use: [
      { loader: 'cache' },
      { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
      {
        loader: 'postcss', options: {
          config: { path: __dirname, ctx: config },
          sourceMap: config.enabled.sourceMaps,

Then change your config.json to match the new name of your main.sass file:

github.com

roots/sage/blob/c2a7b5edd0d95a1b775952d3463e78d8fbcaac86/resources/assets/config.json#L5


{
"entry": {
  "main": [
    "./scripts/main.js",
    "./styles/main.scss"
  ],
  "customizer": [
    "./scripts/customizer.js"
  ]
},
"publicPath": "/app/themes/sage",
"devUrl": "http://example.dev",
"proxyUrl": "http://localhost:3000",
"cacheBusting": "[name]_[hash:8]",
"watch": [

Then you would need to rename all the *.scss to *.sass and update your syntax in these files.

Lastly, run yarn start again and hopefully you’ll have SASS instead of SCSS working. Or if you want to try Stylus (which is even better in my opinion), I can share what I did to make that work…

josialoos · August 16, 2019, 1:14pm

This seems to work … sass is being compiled and browsersync loads everything correctly into the browser preview. Only the error window shows me errors for scss. Any ideas how this can be switched from scss to sass as well?

Stephen · August 24, 2019, 10:36am

What do you mean about the error window? Can you provide some further details and screenshots so we can understand what you mean?

You might also want to try Sage 10, which uses Laravel Mix for managing the Webpack setup: https://github.com/roots/sage/tree/10.0.0-dev - it’s not a final release yet but from what I’ve read, it’s already very usable.

jameslutley · August 26, 2019, 3:01am

I think @josialoos is referring to Stylelint errors when using Sass intented syntax. I’ve run into the same issue myself trying to use Sass with Sage.

See this related issue in the Stylelint repo: https://github.com/stylelint/stylelint/issues/1685

I’ve considered switching to Sugarss (PostCSS indented syntax). But it seems quite niche – I’m not sure how much support this will get in the future.

josialoos · August 26, 2019, 5:13am

Yes correct @jameslutley I meant the Styleint errors. Though I have to say … I switched Styleint off and then realized, that it looked like Sass was compiling right through the error window, but it really didn’t. So I gave up on this thing for now and have to work with Scss, though I hate it and really don’t understand why everyone is using Scss instead of Sass. It really doesn’t make any sense, as Sass is much more simple, fast, super short and so easy to write …

@Stephen I’d rather not try Sage 10 yet, as I’m afraid of bugs and stuff. Maybe I’ll try it some time when I get bored on a safe machine, to make sure it won’t interfer with my bedrock and trellis installation and dependencies. But thanks for the hint!

JOB OFFER:
I’d gladly pay someone to make Sass work for me. So if someone figures out how to do it, please let me know!!