방법: 먼저 [node-sass 및 sass-loader] 종속성을 설치한 다음 [webpack.base.conf.js] 파일을 열고 마지막으로 [</style>에 scss 규칙을 추가합니다. ;] 태그 안에 scss 스타일을 작성합니다. </p></blockquote><p><img src="https://img.php.cn/upload/article/000/000/024/5fbb18d45ff2d696.jpg"/ alt=".vue 파일에 scss를 작성하는 방법은 무엇입니까?" ></p><p>이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6 이 방법은 모든 브랜드의 컴퓨터에 적합합니다. </p><p style="max-width:90%"><span style="font-size: 18px;"><strong>vue 프로젝트에서 scss를 사용하세요</strong></span></p><p><strong>1. 먼저 종속성을 설치하세요</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>npm install node-sass sass-loader --save-dev</pre><div class="contentsignin">로그인 후 복사</div></div><p><strong>2. <code>build</code>에서 <code>webpack.base.conf.js</code를 찾으세요. >, <code>rules</code><code>build</code>中<code>webpack.base.conf.js</code>,在<code>rules</code>中添加<code>scss</code>规则</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }</pre><div class="contentsignin">로그인 후 복사</div></div><h5>3.在vue文件中使用</h5><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><style lang='scss'> 在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 비디오 튜토리얼 선택🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜🎜
