최신 vue-cli 스타터 프로젝트와 함께 SASS/SCSS를 사용하는 방법

최신 vue-cli 스타터 프로젝트와 함께 SASS/SCSS를 사용하는 방법

내 프로젝트에서 SASS나 SCSS를 사용해야 해.

나는 최신 버전의 스타터 프로젝트를 만들기 위해 vue-cli를 사용했다.

웹팩을 이용한 최신 스타터 프로젝트에서 sass/scss 작업을 성공시킨 사람?

1. 필요한 종속성을 설치하는 경우

   npm install -D node-sass sass-loader

2. 전역 스타일을 위해 파일을 다음 위치에 가져오십시오.main.js:

   import './styles/my-styles.scss'

3. 에.vue파일, 에 언어 추가<style>원소의

   <style lang="scss">

웹 스톰을 사용하는 경우:

<style lang="scss" rel="stylesheet/scss">

의 최신 문서로서@vue/cli-service": "^3.9.0", 먼저 두 개의 npm dev 종속성(예: sass, sass-loader)을 설치해야 함

새스

npm install -D sass-loader sass

yarn add --dev sass-loader sass

그런 다음 해당 파일 형식을 가져오거나 *.vue 파일에서 다음을 사용하여 사용할 수 있다.

<style lang="scss">
  $color: red;
</style>

여기에서 최신 설명서를 참조하십시오.

여기에 추가package.json에scripts뛰어가다니다

"compile:sass": "node-sass 'your main scss file location' 'your compiled css file location' -w"

반드시node-sass그리고sass-loader적절하게 추가된다.

그런 다음 App.vue 파일에서 이 파일을 추가한 후 실행하십시오.

<style lang="scss">

    @import 'your compiled css file location';

</style>

이것은 나에게 효과가 있다.

고마워요.

참조URL: https://stackoverflow.com/questions/44019469/how-to-use-sass-scss-with-latest-vue-cli-starter-project