在vue项目中scss的安装和使用

在vue项目中scss的安装和使用

在这里不谈scss的语法 ,想看语法的可以点击这里,在这里说一下安装和全局使用.

安装scss

• 安装插件

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

• 找到build中webpack.base.conf.js,在rules中添加scss规则

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

• 在vue文件中使用

<style lang="scss" scoped>
$redcolor:rgb(149, 245, 229);
.moudel{
  width: 50%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $redcolor;
}
.parent{
  @extend .moudel;
  .child{
    width: 90%;
    height: calc(100% - 50px);
    border: 1px solid $redcolor;
    background-color: antiquewhite;
  }
}
</style>

如果你在安装完成后,报错可以点击这里查看解决方法.

在vue项目全局中引入scss

应用场景:当项目中我们会定义很多样式全局变量,把这些变量都提取到一个文件中, 为了更好的代码复用，避免写重复代码，问题的关键是怎么在我们的项目中引入这些文件。

• 1.全局引用时需要安装sass-resources-loader

npm install sass-resources-loader --save-dev

• 2.修改build中的utils.js
  将文件中

sass: generateLoaders('sass', { indentedSyntax: true }),

修改为

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/style/common.scss')
    }
  }
)