text PHPStorm SASS设置

Posted 2021-05-01

https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000187290-File-Watchers-in-SCSS-output-directory

https://www.jetbrains.com/help/phpstorm/using-file-watchers.html



Command + ,

Seach File Watchers

Add [ SCSS ]

File type: SCSS Style Sheet

Score: Project Files

Program: scss

Arguments: --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

Output paths to refresh: ..css/$FileNameWithoutExtension$.css:../css/$FileNameWithoutExtension$.css.map

Working Directory: $FileDir$

[ dont select auto save edited files to trigger ]


File Structure:


project/

	css/
		child-theme.css
		child-theme.map

	sass/
		theme/
			_child_theme.scss
			_child_theme_footer.scss
			_child_theme_variables.scss
		child-theme.scss





/sass/child-theme.scss:
@import "theme/child_theme_variables";

// additional @imports here

// Our child theme
@import "theme/child_theme"; // <--------- Add your styles into this file




/sass/theme/child_theme.scss:

// scss
$base : #666 ;

.test {
  color: $base;
  border-color: #000;
}

.child_theme_end {
  text-align: center ;

}

@import "child_theme_footer";