发表了博客
2019/03/19 19:26

【vue】项目编译报错 Error: No PostCSS Config found in...

问题描述: 项目在本地运行不报错,上传到 GitHub 之后,再 clone 到本地,执行: npm install 安装完成之后再执行: npm run dev 这时报错 Error: No PostCSS Config found in... 本以为是 GitHub 上传的问题,后开又试了两回,发现问题依然存在,于是就开始网上寻找办法。 解决方案: 在项目根目录新建postcss.config.js文件,并对postcss进行配置: module.exports = {   plugins: {     'autoprefixer': {browsers: ...

0
0
发表了博客
2019/11/18 09:39

【webpack】webpack之postcss-loader的基本使用---【巷子】

一、postcss-loader简介 postcss-loader 用来对.css 文件进行处理,并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。 require('autoprefixer') 的作用是加载 Autoprefixer 插件 安装相关依赖 yarn add style-loader css-loader sass-loader node-sass postcss-loader autoprefixer -D 二、基本配置 module.exports = { module:{ rules:[ {...

0
0
发表了博客
2019/11/05 10:21

postcss 将px转换成rem vuecli3+vant+vue+postcss

1.安装 npm install postcss-pxtorem --save 2.找到postcss.config.js 默认是这样 module.exports = { "plugins": { "autoprefixer": {}, } } 修改成这样 module.exports = { "plugins": { "autoprefixer": { browsers: ['Android >= 4.0', 'iOS >= 7'] }, "postcss-pxtorem": { "rootValue": 37.5, 根据UI提供的375尺寸来,如果设置rootValue等于75,那么按照UI提供的750尺寸...

0
0
发表了博客
2018/02/07 10:22

[转] webpack3.0踩坑:postcss-loader的使用

解决方案: 只是换了一种引入方式,解决了 1,创建postcss.config.js文件,添加如下代码:(引入autoprefixer插件) 1 2 3 4 module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } 2.在webpack2.6版本 可以通过直接在webpack.config.js中添加如下代码使用: 1 2 3 4 5 6 7 8 9 10 11 12 13 plugins: [ new webpack.LoaderOptionsPlugin({ options: { postcss: function(){ return [ require("autopre...

0
0
发表了博客
2019/06/13 16:27

对postcss-plugin-px2rem的研究

1.安装postcss-plugin-px2rem 2.配置 css: { loaderOptions: { postcss: { plugins: [ require('postcss-plugin-px2rem')({ // rootValue: 100, //换算基数, 默认100 // unitPrecision: 5, //允许REM单位增长到的十进制数字。 //propWhiteList: [], //默认值是一个空数组,这意...

0
0
2021/01/18 17:01

postcss-preset-env 自动添加css兼容性前缀

### 代码在下面 这是webpack5 (关于browserslist的相关信息点击这里) 需要安装 postcss postcss-loader postcss-preset-env // package.json { "name": "webpack-demo", "version": "1.0.0", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "watch": "webpack --watch", "start": "webpack serve" }, "author": "", "license": "ISC",...

0
0
发表了博客
2019/08/24 18:51

vue-cli3.0 使用px2rem 或 postcss-plugin-px2rem

vue-cli3.0 使用px2rem 或 postcss-plugin-px2rem px2rem 构建项目(vue-cli3.0) vue create hello-world (Manuall select features) 安装px2rem-loader(devDependencies) npm install px2rem-loader --save-dev 移动端适配解决npm包 "lib-flexible" (dependencies) npm install lib-flexible --save main.js中引入 "lib-flexible" import 'lib-flexible' // 移动端适配 (目录: hello-world/src/main.js) Create new "vue.config...

0
0
发表了博客
2019/06/13 16:35

如何在vue-cli3中使用postcss-px2rem

在src目录下创建 viewport.js 文件下载:https://github.com/imochen/hotcss/tree/master/src 这个JS是用来在页面打开的时候给HTML根加上适配的字体大小 然后在main.js下添加: import './viewport.js' 这里强调下为什么不使用lib-flexible插件 个人在使用lib-flexible插件时,感觉没hotcss友好, lib-flexible在页面打开的时候,内容渲染完了才在HTML根上添加适配,这样页面会重新渲染一次,导致内容从大变小,或从小变大这样的...

0
0
发表了博客
2020/10/02 08:39

解决wepacke配置postcss-loader时autoprefixer失效问题

本文主要讲述了: 作用 安装 示例 配置 正文 作用 postcss-preset-env允许开发者使用最新的CSS语法而不用担心浏览器兼容性。postcss-preset-env会将最新的CSS语法转换为目标环境的浏览器能够理解的CSS语法。 安装 今天在配置postcss-loader,使用autoprefixer发现根本没有用。 postcss.config.js中是这样的: module.exports = { plugins:[ require('autoprefixer') ] } 然后打包也没报错,只是没有起任何作用,一些需...

0
0
发表了博客
2019/01/29 11:11

vue-cli3.0 使用 postcss-pxtorem px转rem

1. 安装依赖包 npm install postcss-pxtorem --save-dev 2. 在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中。 module.exports = { productionSourceMap: false, // 生产环境是否生成 SourceMap css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 换算的基数 selectorBlackList...

0
0
发表了博客
2019/07/31 08:55

PostCSS的插件 -- 关于vue rem适配布局方案

PostCSS的插件 作用:用于自动将像素单元生成rem单位 记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种,最近大家推荐第一种(在配置上多了配置选项上有 exclude 属性,可配置是否对 某个文件夹下的所有css文件不进行转换),之前我用的第二种(也是目前使用最多的) 都有可以配置selectorBlackList: [] 要忽略并保留为px的选择器 还有个小技巧 -- 如果个别地方不想转化px。可以简单的使用大写的 PX...

0
0
发表于大前端专区
2020/09/15 10:07

移动端vue配置rem适配--postcss-pxtorem、amfe-flexible

postcss-pxtorem px 转 rem amfe-flexible 屏幕尺寸自适应 一、安装postcss-pxtorem与amfe-flexible npm i amfe-flexible --save npm install postcss-pxtorem -D 二、在 main.js 中加载执行该模块 import 'amfe-flexible' 三、在项目根目录中创建 postcss.config.js 文件 module.exports = { plugins: { "postcss-pxtorem": { rootValue: 192, // 根据设计图尺寸写,设计图是1920,就写192 propList: ["*"], // 需要被转换的属...

0
0
2018/09/04 09:35

Vue CLI 3 自适应解决方案 postcss-px2rem和amfe-flexible

安装postcss-px2rem ```javascript cnpm i postcss-px2rem -S ``` 配置postcss-px2rem ```javascript //.postcssrc.js module.exports = { plugins: { autoprefixer: {}, 'postcss-px2rem': { remUnit: 37.5 } } } ``` 安装amfe-flexible ```javascript cnpm i amfe-flexible -S ``` 配置amfe-flexible ```javascript //.main.js import Vue from 'vue' import App from './App.vue' import router from './router' import 'am...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页