vue中使用scss报错问题记录

阿友友

已于 2022-04-19 09:03:35 修改

阅读量845

点赞数

分类专栏： Vue 文章标签： css3

于 2020-11-22 23:54:35 首次发布

本文链接：https://blog.csdn.net/qq_35702372/article/details/109843358

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近在项目中按照如下步骤使用sass时发现可以成功安装，代码中使用会报错。

使用npm安装

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

在build目录找到webpack.base.conf.js文件中的rules加入配置。
```
{
   test: /\.scss$/,

   loader: 'sass-loader!style-loader!css-loader',

}
```
到此时都是ok的。项目仍在正常运行中，在vue中style部分加入scoped lang="scss"，开始使用时报错。

通过面向百度编程搜索得知可能是版本过高问题，现使用低版本的安装后可以成功运行。

npm  install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --sava-dev

然后就可以愉快地运行scss咯~

<style scoped lang="scss">
  .el-footer{
    background: #c0c4cc;
    display: flex;
    align-items: center;
    justify-content:center;
  }
</style>