给 vue 项目添加 css 预处理语言 sass


第一步:

  安装sass的依赖包

  在命令行工具输入: npm install --save-dev sass-loader

   如果版本太高导致报错,可以使用npm install sass-loader@7.3.1 来降低版本,测试过7.3.1版本可以正常使用

第二步:

  安装node-sass  因为sass-loader依赖于node-sass,所以要安装node-sass

  在命令行工具输入:npm install --save-dev node-sass

第三步:

  配置

  使用脚手架的项目,vue版本 2.0 以上的不需要做任何配置,只要正确安装了就可以正常使用。再做配置可能会导致报错。

 

 第四步:

  使用

  

 

   其实使用很简单,先在style 标签里面加上 lang="scss" ,如果你的项目的scss 没有效果就要留意 有没有在标签加上了   lang="scss" 

  然后你可以直接在style 标签里面写 scss 或者 导入 scss 

  在style 标签里面写scss 没有什么特别的,至于导入scss 有两种方法,

  第一种是普通方法:@import   '../common/sasset/sass01';

  第二种方法是:@import   '~@common/sasset/sass01';

  这两种方法的效果都是一样的,只是我个人喜欢使用第二种方法

 注意: 在引入的scss语句后面一定要加上 “   ”  (分号)号,否则会报错。

  这样在sass01.scss文件里面声明的变量就可以在引入sass01这个文件的页面里去使用在sass01.scss文件里声明的变量了。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM