vue cli webpack에서 sass를 사용하는 방법(자세한 튜토리얼)

본 글은 주로 vue cli webpack에서 sass를 사용하는 방법을 소개하고 있으니 필요한 친구들은 참고하시면 됩니다

1: Install dependency

npm install sass-loader node-sass --save-dev

2: html에서 스타일 수정

<style lang="sass">
 /* write sass here */
</style>

3: 일반 Sass 구문 사용

//但是会报错
<style lang="sass">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
 border: $highlight-border
 }
 // 解决方案一 记得属相前面一定是两个空格
<style lang="sass">
 $highlight-color: #F90
 $highlight-border: 1px solid $highlight-color
 .selected 
  border: $highlight-border
</style>
// 解决方案二 sass 修改为 scss
<style lang="scss">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
  border: $highlight-border
 }
</style>
// 官方解决方案 你需要配置 vue-loader 的选项
{
 test: /\.vue$/,
 loader: &#39;vue-loader&#39;,
 options: {
 loaders: {
  scss: &#39;vue-style-loader!css-loader!sass-loader&#39;, // <style lang="scss">
  sass: &#39;vue-style-loader!css-loader!sass-loader?indentedSyntax&#39; // <style lang="sass">
 }
 }
}

링크: https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html

4: sass/scss 파일 참조

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

vue의 버스 글로벌 이벤트 센터(자세한 튜토리얼)

Angular 시리즈의 변경 감지 문제에 대한 자세한 해석

vue-cli에서 vuex 사용(자세한 튜토리얼)

위 내용은 vue cli webpack에서 sass를 사용하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!