标签：scss style vant babel 插件 ui 引入 import resources

vant-ui的按需加载 babel-plugin-import 实现按需加载 “ babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式// 插件安装 yarn add babel-plugin-import -D 复制代码 // 在babel.config.js 中配置 module.exports = {pre…

vant-ui的按需加载

babel-plugin-import 实现按需加载

“ 

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

1 2 3

// 插件安装 yarn add babel-plugin-import -D 复制代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 在babel.config.js 中配置 module.exports = {   presets: ["@vue/cli-plugin-babel/preset"],   plugins: [     [       "import",       {         libraryName: "vant",         libraryDirectory: "es",         style: true       }     ]   ] };   复制代码

使用vant组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// demo.vue <template>   <van-button type="info" :loading="loading">按钮</van-button> </template>   <script lang="ts">   import { Component, Vue } from "vue-property-decorator";   @Component({     name: "ButtonDemo",     components: {       [Button.name]: Button, // 组件使用     }   })   export default class extends Vue {} </script> 复制代码

移动端之rem的适配方式

postcss-pxtorem

“ 

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 安装插件 yarn add postcss-pxtorem -D   // 在postcss.config.js中进行配置 module.exports = {   plugins: {     autoprefixer: {},     "postcss-pxtorem": {       rootValue: 37.5,       propList: ["*"]     }   } }; 复制代码

1 2 3 4 5 6 7 8 9

// 在package.json中设置在什么情况下启用 PostCss {   "browserslist": [     "> 1%", // 全球超过1%人使用的浏览器     "last 2 versions" // 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本   ] } // 复制代码

2020还自己手写css在个大浏览器的兼容版本难免有些low，这里的autoprefixer正好可以帮我们增加兼容版本。

rootValue根据UI图的大小进行设置，像vant、mint-ui这样的第三方UI框架是375，但是我们开发是一般使用的是750的尺寸，如果rootValue设置成75，会发现vant组件会偏小。所以设置成37.5,如果我们拿到了750的图那么实际尺寸需要 *2。其实我们如果使用蓝湖，可以直接设置一下@2。

amfe-flexible

“ 

amfe-flexible用于设置 rem 基准值,，你可能听过lib-flexible，打开官网发现已经废弃了，推荐使用的是amfe-flexible。

1 2 3 4 5 6 7 8 9

// 安装插件 yarn add amfe-flexible -D    // 在main.ts中使用 import "amfe-flexible/index.js";   // 更改index.js中的viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 复制代码

效果

“ 

注： postcss-pxtorem目前只支持外部样式表，也就是说内联样式不会被转成 rem

正常情况下我们可以发现webpack已经将 px转换成了相应的rem。

定义全局的统一sass变量

全局变量

“ 

定义好全局的变量方便统一规范css颜色，比如说：我们定义一个变量$bg为红色，后期想改变这个颜色就可以直接更改全局变量

目录结构

1 2 3 4 5 6

├─ src/              │   ├─ styles/     ├─── _variables.scss │   ├─── _variables.scss.d.ts │   ├─── index.scss 复制代码

_variables.scss

1 2 3 4 5 6 7 8 9 10 11 12 13

// Base color $bg:#324157;   // Sidebar $subMenuBg:#1f2d3d;   // Login page $loginBg: #2d3a4b;   :export {   subMenuBg: $subMenuBg; } 复制代码

variables.scss.d.ts

1 2 3 4 5 6 7 8

export interface IScssVariables {   menuBg: string; }   export const variables: IScssVariables;   export default variables; 复制代码

引入全局变量

“ 

直接在主入口文件main.ts里面引用是不生效的,这里需要使用style-resources-loader来帮助我们引入。

• style-resources-loader是什么呢？

“ 

style样式资源处理器，在style资源中注入内容，导入css / sass / scss / less / stylus这些内容。

• style-resources-loader有什么作用呢？

“ 

将预编译样式的变量、函数、mixin注入到全局，避免在每个样式文件中手动的@import导入

• 如何使用style-resources-loader？

  style-resources-loader是webpack的插件，所以需要我们自定义配置，vue-cli 3.0+隐藏了默认配置，并允许我们通过vue.config.js来修改配置。

  1 2 3 4 5 6 7 8 9 10 11 12 13

  module.exports = {   devServer: {}, // 端口号，构建完毕是否直接打开，反向代理等   pluginOptions: { // 这里使用style-resources-loader引入全局变量     "style-resources-loader": {       preProcessor: "scss",       patterns: [         path.resolve(__dirname, "src/styles/_variables.scss")       ]     }   },   chainWebpack(config){} // webpack的高级配置 }

标签：scss,style,vant,babel,插件,ui,引入,import,resources
来源： https://blog.csdn.net/LiuBo_1999/article/details/117533436

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。