.vue檔案裡怎麼寫scss？

方法：先安裝【node-sass和sass-loader】依賴；然後開啟【webpack.base.conf.js】文件，在rule中加入scss規則；最後在【

本教學操作環境：windows7系統、Vue2.9.6版，此方法適用於所有品牌電腦。

在vue專案中使用scss

#1.首先安裝依賴##

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

2.找到build中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: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/style/common.scss')
    }
  }
)

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教學推薦：2020最新的5個vue.js影片教學精選

更多程式相關知識，請訪問：

程式設計入門

！ ！

以上是.vue檔案裡怎麼寫scss？的詳細內容。更多資訊請關注PHP中文網其他相關文章！