.vue 파일에 scss를 작성하는 방법은 무엇입니까?

방법: 먼저 [node-sass 및 sass-loader] 종속성을 설치한 다음 [webpack.base.conf.js] 파일을 열고 마지막으로 [>에 scss 규칙을 추가합니다. ;] 태그 안에 scss 스타일을 작성합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

vue 프로젝트에서 scss를 사용하세요

1. 먼저 종속성을 설치하세요

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

2. build에서 webpack.base.conf.js를 찾으세요. >, rulesbuild中webpack.base.conf.js,在rules中添加scss规则

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

3.在vue文件中使用

<style>
</style>

在vue项目全局中引入scss

1.全局引用时需要安装sass-resources-loader

npm install sass-resources-loader --save-dev

2.修改build中的utils.js

scss: generateLoaders('sass')

에 scss 규칙을 추가하세요. 3. vue 파일에서

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/style/common.scss')
    }
  }
)

를 사용하세요

vue 프로젝트에 전역적으로 scss를 소개하세요

1 전역 참조를 위해 sass-resources-loader를 설치해야 합니다

rrreee2. build에서 utils.js를 수정하세요. code> code>

rrreee

를

rrreee

로 수정 관련 권장 사항:

🎜2020 프런트 엔드 vue 인터뷰 질문 요약(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 권장 사항: 2020 최신 5 vue.js 비디오 튜토리얼 선택🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜🎜

위 내용은 .vue 파일에 scss를 작성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!