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

  • Z时代
  • 2024-02-06
  • 分类：IT

看到一个开源的 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 这两种方式？

回答：

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

  • src/main.js at main · creativetimofficial/muse-vue-ant-design-dashboard · GitHub
  • src/scss/app.scss at main · creativetimofficial/muse-vue-ant-design-dashboard · GitHub

这两部分就是，在 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> 中维护也是差不多效果，只不过他是一次性加载完毕而不是载入组件的同时载入样式了。这样出现样式污染发现起来会比较容易吧？

以上是 vue 和 scss 结合使用有多少种方式？ 的全部内容， 来源链接： utcz.com/p/934487.html

回到顶部