vue裏怎麼用scss

使用vue-cli搭建項目有內置的webpack方案，可是沒有使用scss。vue提供了初始化的webpack模板，其中使用了vue-loader。vue-loader默認只支持sass,要是想要使用scss，必須安裝node-sass和sass-loader，並修改相關webpack配置。具體操做以下：

1. 依次執行如下命令 安裝node-sass和sass-loader

npm install node-sass --save-dev
npm install sass-loader --save-dev
複製代碼

若npm安裝太慢，可使用cnpm安裝

2. 修改相關webpack配置 打開webpack.base.config.js, 在module裏的rules中加上：

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
  },
複製代碼

3. 若是要在vue文件中的style使用scss,則在 style處聲明：

<style rel="stylesheet/scss" lang="scss"></style>
複製代碼

最好加上scoped，這樣能夠保證當前style只對當前組件有效，避免組件間樣式相互影響。即：

<style rel="stylesheet/scss" lang="scss" scoped>
 ...
</style>
複製代碼