Vue2.x安装并使用SCSS的全部过程

目录

•  一、什么是SCSS
• 二、SCSS与CSS的区别
• 三、Vue中安装SCSS
• ♻️安装SCSS
• ♻️运行项目进行测试
• 四、项目中使用SCSS
• 补充：全局引用scss
• ⛺SCSS常用命令
• 总结

 一、什么是SCSS

SCSS是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

二、SCSS与CSS的区别

• SCSS代表Sassy CSS。与Sass不同，SCSS并非基于缩进。
• .sass扩展名用作Sass的原始语法，而SCSS通过.scss扩展名提供更新的语法。
• 与Sass不同，SCSS与CSS一样具有花括号和分号。
• 与SCSS相反，Sass很难阅读，因为它与CSS截然不同。这就是为什么SCSS成为更推荐的Sass语法的原因，因为它更易于阅读，并且与Native CSS非常相似，同时又享受了Sass的强大功能。

SCSS更加优秀！

三、Vue中安装SCSS

建议在cmd窗口安装并使用管理员方式打开

♻️安装SCSS

使用阿里云服务器下载依赖，在国内下载会比npm外网下载依赖快一些

cnpm i -D node-sass sass-loader

//vue2.5.2需要降级安装 
cnpm i -D [email protected] [email protected]

♻️运行项目进行测试

输入以下命令运行项目

npm run dev

运行成功~

四、项目中使用SCSS

在vue文件中指定样式语言为scss

vue代码

到此完美使用SCSS~

补充：全局引用scss

先安装这个插件来进行全局引用scss

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

然后修改build文件夹中的utils.js文件

将

 scss: generateLoaders('sass'),

改为

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/index.scss')//这里改为自己的index.scss文件路径
    }
  }
)

项目里每个组件都可以直接用base.scss文件内的变量及样式了。记得style内加上lang=“scss”