vue 和 scss 结合使用有多少种方式？

作者站长头像
站长
· 阅读数 6

看到一个开源的 vue+and 的 demo：https://github.com/creativetimofficial/muse-vue-ant-design-dashboard

看了一下其中的源码

遇到了一些未解的问题

src/views/Sign-Up.vue 里面的 style 模块是空的，其中 scss 相关的定义在 src/scss/pages/_sign-up.scss

vue 和 scss 结合使用有多少种方式？

我不清楚 vue 是怎么把这两个文件关联起来的？

  • src/views/Sign-Up.vue
  • src/scss/pages/_sign-up.scss

我就知道两种方式，一种是直接写在 style 中

<style lang="scss">
  /* SCSS code here */
</style>

另一种是在 style 中 src

<style src="./path/to/external-styles.scss" lang="scss"></style>

但是这个 project 好像 both not 这两种方式？

回复
1个回答
avatar
test
2024-07-01

一般来说都是可以在项目的配置文件中找到相关的部分，比如说你提供的项目中：

这两部分就是，在 main.js 中全局引入了 app.scss，并且在 app.scss 中分别引入了各页面&组件等的SCSS样式文件。所以并不是 Vue 或者 Webpack 在编译时处理的，我一开始还以为是在 webpack 编译时期通过 loader 混入到对应的组件代码中。

对于项目来说，差不多就是古早时期 index.html 中引入 style.css 一样。把所有的样式文件都书写在了 style.css 中了，只不过现在他使用了 SCSS 预编译器和模块化维护了各个部分的样式。这样的话，所有的组件都不会有 scope-id 出现在HTML结构当中(不打开 scope 属性就不会有)，但是在维护样式的时候需要注意命名规范（大多数情况下都是遵循 BEM规范）。我看这个项目就是并不是很标准，但是因为层级深度浅，所以出现问题也可以容易覆写。

所以结论就是并没有什么特殊的处理，只不过等同于把所有样式维护在了一个主题SCSS文件中。其实在对应的 .vue 文件的 <style> 中维护也是差不多效果，只不过他是一次性加载完毕而不是载入组件的同时载入样式了。这样出现样式污染发现起来会比较容易吧？

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容