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>
复制代码