方法:先安裝【node-sass和sass-loader】依賴;然後開啟【webpack.base.conf.js】文件,在rule中加入scss規則;最後在【< /style>】標籤內寫scss樣式。 </p></blockquote> <p><img src="https://img.php.cn/upload/article/000/000/024/5fbb18d45ff2d696.jpg" alt=".vue檔案裡怎麼寫scss?" ></p> <p>本教學操作環境:windows7系統、Vue2.9.6版,此方法適用於所有品牌電腦。 </p> <p style="white-space: normal;"><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>2.找到<strong>build<code>中</code>webpack.base.conf.js<code>,在</code>rules<code>中加入</code>scss<code>規則</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>3.在vue檔案中使用<h5><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><style lang='scss'> 登入後複製 在vue專案全域中引入scss##1.全域引用時需要安裝sass-resources-loadernpm install sass-resources-loader --save-dev登入後複製2.修改build中的utils.js #將 scss: generateLoaders('sass')登入後複製 修改為 scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { //你自己的scss全局文件的路径 resources: path.resolve(__dirname, '../src/style/common.scss') } } )登入後複製 相關推薦: 2020年前端vue面試題大匯總(附答案)vue教學推薦:2020最新的5個vue.js影片教學精選更多程式相關知識,請訪問:程式設計入門! !