Sass Alternatives

So, you don't like SASS/SCSS or prefer working with a different system?

Don't worry. You can use plain CSS, Less, or Stylus.

SCSS supports CSS

First, I should point out that SCSS supports plain CSS. If you're simply wanting to write plain CSS, I encourage you to continue using the .scss files. Regular ol' CSS will work fine there. There's no need to change anything.

Folder structure

If you want to make the switch to a different file type, you'll want to create one of the following folders under resources:

/resources
	/css
	/less
	/stylus

Technically, these can be named anything, but I'm trying to keep things simple.

You'll want to at least create three files within those folders. Let's assume you're going with plain LESS, you'll have a structure that looks like the following.

/resources
	/less
		/customize-controls.less
		/editor.less
		/screen.less

It's easiest to just look over in the default resources/scss folder and copy the file/folder structure from there.

Changing the build code

Mythic uses Laravel Mix for handling asset building. You'll want to check out the Working With Stylesheets. The docs are easy to follow.

Once you have your folder set up, you'll want to open webpack.mix.js and look for the section on stylesheets that should look similar to the following.

// Sass configuration.
var sassConfig = {
	outputStyle : 'expanded',
	indentType  : 'tab',
	indentWidth : 1
};

// Compile SASS/CSS.
mix.sass( `${devPath}/scss/screen.scss`,             'css', sassConfig )
   .sass( `${devPath}/scss/editor.scss`,             'css', sassConfig )
   .sass( `${devPath}/scss/customize-controls.scss`, 'css', sassConfig );

You'll want to replace that code with calls to mix.less(), mix.stylus(), or mix.styles(), depending on what you want to do.

For example, here's what the above might look like when using LESS:

mix.less( `${devPath}/less/screen.less`,             'css' )
   .less( `${devPath}/less/editor.less`,             'css' )
   .less( `${devPath}/less/customize-controls.less`, 'css' );

Mix allows you to tell it which files you want processed and where you want them to go. All we're doing here is pointing to the resources/less/*.less files and telling them to get compiled to the dist/css folder.

Definitely give the Lavarel Mix docs a good read. There's not much more I could add here that's not already covered.