postcss

解决vue移动端适配问题

由 微笑、不失礼 提交于 2019-12-26 01:15:37
1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点 ：rem相对根节点字体的大小。所以不用px; 根字体 ：字体的大小px; px ：你就当成cm(厘米)这样的东西吧； 基准 ：750设计稿； 这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！ 目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿 目标二 、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作 为什么选择rem? 很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性； 还有一种就是自己写百分比很不优雅 一、理论基础！ 实现目标一 用rem就可以了吧！因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。 但是，但是，重点来，如果，根字体的大小默认是16px；那么，我们的1rem；就永远是16px，懂么？也就是如果设计稿是750（放大了一倍，iphone是375pt),我们想要个50%的大小: 50%*357px/16=11.718rem 如果我们写一个11.718rem的宽度，然而这只能在能iphone6还原设计稿

How to use autoprefixer with Webpack 1.x.x?

由 ￡可爱￡侵袭症＋ 提交于 2019-12-25 08:28:35
问题 I'm writing an Angular 1.5.x app with components that embed their own style. The <leave-calendar> component define a linear-gradient background which works fine on Firefox but need the vendor prefix in Chromium. Here is what I have done so far: Requirements a working component ; installed postcss-loader : yarn add --dev postcss-loader add browserslist to package.json : "browserslist": [ "> 1%", "last 2 versions", "ie 9" ] leave-calendar.html <style lang="scss"> .leave-draft { background-color

Is there a way to test if PostCSS Autoprefixer is working? Specifically for Rails 6

由 ＊爱你＆永不变心＊ 提交于 2019-12-23 17:24:03
问题 I am writing a Rails 6 webapp using Webpacker. Its my understanding that auto-prefixing in Rails 6 works out of the box via PostCSS and its autoprefixer plugin. However I cannot verify if this library is in fact prefixing my css or not. Is there a way to confirm if a standard default Rails 6.0.0 app auto-prefixes out of the box? I have run yarn autoprefixer --info to see the css rules and browsers it applies to and its def applying to my browser chrome 77 . And I tried using a parameter that

Require another file in gulpfile (which isn't in node_modules)

由 六月ゝ 毕业季﹏ 提交于 2019-12-23 01:41:45
问题 I've been using gulp for a while now and know how to import another node module, e.g. var sass = require('gulp-sass'); That's fine, but my gulpfile is filling up with code that I'd like to move into a separate file and "require". Specifically I am writing a postcss plugin, which I already have working when declared as a function inside of the gulpfile. My question is how to put my function in an external file and require it like I do a node module. Do I need to "export" the function in the

Webpack + postcss + themes + hot reloading

由 拥有回忆 提交于 2019-12-22 08:34:12
问题 I want to allow users to select themes on my website, which they will do through a dropdown this. I am currently having trouble figuring out how to support this feature though, without writing dumb code. I currently use css-modules along with postcss to make my life easier. Webpack is used to bundle everything together. I utilize hot reloading during development, during which I use the style-loader instead. The full configuration looks like this { test: /\.css$/, loader: !isDev ?

vue 中 px转vw的用法

由 核能气质少年 提交于 2019-12-18 14:42:02
下面介绍最简单的用法 1 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev 2 在项目根目录下新建postcss.config.js,配置如下 module.exports = { plugins: { "autoprefixer": { path: ['./src/*'] }, "postcss-import": {}, "postcss-px-to-viewport-opt": { "viewportWidth": "1920", //视窗的宽度，对应的是我们设计稿的宽度 "viewportHeight": "1080", // 视窗的高度 "unitPrecision": 2, //指定`px`转换为视窗单位值的小数位数(很多时候无法整除) "viewportUnit": "vw", //指定需要转换成的视窗单位，建议使用vw "selectorBlackList": ['#nprogress'], //指定不转换为视窗单位的类 "minPixelValue": 1, // 小于或等于`1px`不转换为视窗单位 "mediaQuery": false, // 允许在媒体查询中转换`px` // "exclude": /(\/|\\)(node_modules)(\/

File containg all google font URLs

由 怎甘沉沦 提交于 2019-12-13 07:18:57
问题 I'm building a set of utilities for applying google fonts - superfly-css-utilities-fonts. I would like to include all the Google font urls such that the utility classes can be built like this: @import url('https://fonts.googleapis.com/css?family=Open+Sans'); @import url('https://fonts.googleapis.com/css?family=Montserrat'); @import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Lato'); /** All fonts fallback to the same variable -

How to use lost, autoprefixer and postcss-flexibility?

由 ぐ巨炮叔叔 提交于 2019-12-12 04:11:38
问题 I want to know the order in which we should use autoprefixer , lost , postcssflexibility in webpack ? 回答1: Here's a basic example (prefixing through postcss, applying precss plugin etc.). webpack 1 const autoprefixer = require('autoprefixer'); const precss = require('precss'); module.exports = { module: { loaders: [ { test: /\.css$/, loaders: ['style', 'css', 'postcss'], }, ], }, // PostCSS plugins go here postcss: function () { return [autoprefixer, precss]; }, }; webpack 2 module: { rules:

Logging what plugins PostCSS is running with?

由 旧巷老猫 提交于 2019-12-11 04:14:02
问题 I'm writing a CLI that uses PostCSS and even though I don't have uncss in the plugins array, I'm getting error reports from uncss . Is there a way to have PostCSS print out what plugins are currently loaded? This issue is related to this issue. 来源： https://stackoverflow.com/questions/54271046/logging-what-plugins-postcss-is-running-with

记一次vue采坑 npm run dev 过程:component: () => import() 出现错误

由 天涯浪子 提交于 2019-12-08 21:49:27
第一次接触VUE，今天为了跑通公司项目，着实费了不少劲。 主要起因是命令： npm run dev 在编译过程中报错：Syntax Error: Unexpected token (4:19) 原来是import这儿报错了，这就需要babel的插件了，vue-router官网上有一段提示： 如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。 运行命令： npm install babel-plugin-syntax-dynamic-import --save-dev 然后修改webpack的js的loader部分： { test: /\.js$/, loader:'babel-loader', options:{ plugins:['syntax-dynamic-import'] }, }, 增加了option选项，至此，能识别我们： const App = () => import ( '../component/Login.vue' );的语法。 我的代码是从gitlab clone下来的，执行 npm install npm run dev 这时报错 Error: No PostCSS Config found in... 解决方案 在项目根目录新建 postcss.config.js 文件
订阅 postcss