当前位置:   article > 正文

如何在vue项目中引入scss,并使用scss样式_style lang="scss" 需要npm

style lang="scss" 需要npm


前言

小白记录如何在vue项目中引入scss,并使用scss样式

提示:以下是本篇文章正文内容,下面案例可供参考

一、scss是什么?(和sass的区别)

  • scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许您使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3。
  • scss 与 sass异同:sass和scss其实是一样的css预处理语言
    1.文件扩展名不同,Sass版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss。
    2.语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号,而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

二、如何在vue项目中引入scss

1.安装sass的依赖包

代码如下(示例):

//在开发环境安装依赖
npm install --save-dev sass-loader
  • 1
  • 2

(若出错,因为sass-loader版本过高导致,可以将其package.json中的版本改为7.3.1,然后再重新安装sass-loader包,若是还过高,则重装6.x,cnpm i sass-loader@6.x --save-dev)

2.sass-loader依赖于node-sass,安装node-sass

代码如下(示例):

//在开发环境安装依赖
npm install --save-dev node-sass
  • 1
  • 2

3.配置vue.config.js文件

1.在asstes文件夹下建立一个scss文件夹 然后创建一个 _variable.scss文件 用来存储全局变量。
在这里插入图片描述
2.在vue.config.js中配置 sass

css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";` //引入全局变量   
      }
    }
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

由于sass-loader的版本不同,这里可能会报错,不同的版本对应的关键字不一样:
sass-loader v8-中,关键字为 “ data ”
sass-loader v8中,关键字为 “ prependData ”
sass-loader v10+中,关键字为 “ additionalData ”
(如果是在webpack.config.js中配置scss),可根据https://blog.csdn.net/weixin_43846248/article/details/89056997进行配置

提示:可能新手不知道webpack.config.js和vue.config.js的区别

webpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都可以使用,vue项目使用,react项目也可用。
vue.config.js是vue项目的配置文件,专用于vue项目。通过vue.config.js中常用功能的配置,简化了配置工作,当然如果需要更专业的配置工作,两者在vue项目中是可以并存的。
vue-cli3创建的时候并不会自动创建vue.config.js,因为这个是可选项,所以一般都是修改webpack的时候才会自己创建一个vue.config.js
再然后因为vue-cli3内部高度集成了webpack,一般来说使用者不需要再去webpack做了什么,所以没有暴露webpack的配置文件,但你依然可以创建vue.config.js去修改默认的webpack。极大的简化了程序员配置webpack的工作

4.在App.vue文件中使用sass

<style lang="scss">
#app {
  color: $theme-color;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5

然后重启服务器 npm run serve (注意你一旦修改了 vue.config.js文件 就要重启服务器 因为你改了配置文件 它加载的是修改之前的)

总结

5月9日对scss如何配置进行梳理

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/82587
推荐阅读
相关标签
  

闽ICP备14008679号