vue-template-admin项目的主题样式设置

一，原有项目的主题设置

官方文档：样式 | vue-element-admin (panjiachen.github.io)

按照官网所说，本项目没有设置自动注入 sass 的 mixin 到全局，所以需要在使用的地方手动引入 mixin。

<style rel="stylesheet/scss" lang="scss"> @import "src/styles/mixin.scss"; </style> 

这样其实很不方便，我想全局引入变量，让页面中的样式可以使用变量。

二，该项目的scss使用方法

如需要自动将 mixin 注入到全局 ，可以使用sass-resources-loader。

因为main.js可以直接import css文件，而不可以直接import scss文件， 所以一些样式文件虽然scss结尾，但是样式中是没有scss特殊语法的，所以直接引入到main.js中即可全局生效

 import "@/styles/index.scss"; // global css 

然后在此文件中：

@import './variables.scss'; @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; @import './sidebar.scss'; 

而这里的’./variables.scss’和’./mixin.scss’才有scss特殊语法，所以它两想要在页面中进行使用，还需要按需引入。

<style lang="scss" scoped> @import "~@/styles/mixin.scss"; @import "~@/styles/variables.scss"; </style> 

现在，我想让这两个文件全局引入，然后页面中不再需要每次要使用都得引入一次。

三，全局引入scss

直接修改vue.config.js文件即可：

module.exports = { 
    ...//其他配置 css: { 
    loaderOptions: { 
    scss: { 
    prependData: `@import "@/styles/variables.scss";@import "@/styles/mixin.scss";`// 引入全局 SasS 变量的文件（对应你全局文件的路径） }, } } }; 

四，样式修改

这样之后，修改样式文件，只需要在@/styles/variables.scss文件中修改变量值即可：

// base color $blue:#; $light-blue:#3A71A8; $red:#C03639; $pink: #E65D6E; $green: #30B08F; $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; // sidebar $menuText:#bfcbd9; $menuActiveText:#409EFF; $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 $menuBg:#; $menuHover:#; $subMenuBg:#1f2d3d; $subMenuHover:#001528; $sideBarWidth: 210px; 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/haskellbc/10950.html