在vue項目中使用scss

一、安裝

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

二、 在build文件夾下的webpack.base.conf.js的rules裏面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

三、使用

<style scoped lang="scss">
  .hello{
    width: 100%;
    height: 800px;
    ul{
      li{
        color: red;
      }
    }
  }
</style>

或者使用scss文件

<style scoped lang="scss">
  @import './../../assets/testscss.scss'
</style>

注意：與css文件的引入方式不同

<style scoped lang='scss'>
@import url("./../../assets/admin/css/login.css");
</style>