postcss

vue-cli引入postcss插件

由 微笑、不失礼 提交于 2020-01-18 02:48:04
利用 vue-cli引入第三发postcss插件的过程 默认情况下vue-loader 也是按postcss进行css加载的 故修改webpack配置文件跟平时不太一样 如下提供三种方法（以填入tailwindcss插件为例） （1）直接在根目录的postcssrc.js添加插件（插件名称用引号括住 后面的大括号是插件选项）。. (2)删除postcssrc.js 在根目录下建立postcss.config.js （3）直接在vue-loader配置文件里添加我们的postcss插件tailwindcss的引入是postcss：[require(‘tailwindcss’)] 一下是官方文档地址 https://vue-loader-v14.vuejs.org/zh-cn/features/postcss.html https://github.com/michael-ciniawsky/postcss-load-config 还有一个小坑 vue-cli的dev-server模式下主index.html引入css 路径被做了限制只可以在static文件夹内引入 来源： CSDN 作者： 星须沉大海 链接： https://blog.csdn.net/qq_40067879/article/details/103753328

Why would I get a “Promise is not defined.” error on Node v5.7.0

由 佐手、 提交于 2020-01-12 06:50:18
问题 Im using autoprefixer with postcss and after moving to a new linux server something must be wrong but I cant figure out what this one could be. I'm getting the error: /home/ec2-user/Enviziion/Muveoo/Server/node_modules/postcss/lib/lazy-result.js:157 this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined Which is triggered by: var autoprefixer = require('autoprefixer'); var postCSS = require('postcss'); function prefix(css, res, type, fullPath) {

Why would I get a “Promise is not defined.” error on Node v5.7.0

由 戏子无情 提交于 2020-01-12 06:50:08
问题 Im using autoprefixer with postcss and after moving to a new linux server something must be wrong but I cant figure out what this one could be. I'm getting the error: /home/ec2-user/Enviziion/Muveoo/Server/node_modules/postcss/lib/lazy-result.js:157 this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined Which is triggered by: var autoprefixer = require('autoprefixer'); var postCSS = require('postcss'); function prefix(css, res, type, fullPath) {

gulp postcss-simple-vars throws error at // comments

由 半世苍凉 提交于 2020-01-06 23:49:37
问题 I'm attempting to migrate from Sass to postCSS and testing out postcss-simple-vars gulp plugin. I'm using Webstorm IDE, which automatically uses javascript style comments (//) in .scss files, so my non-block comments are all // comments, not /* */. postcss-simple-vars throws errors at all // comments, even with the silent option set to true. Here's my gulp task: gulp.task('postcss', function () { return gulp .src('./styles/sass2/*.scss') .pipe($.postcss( [ vars({ silent: true, variables:

gulp postcss-simple-vars throws error at // comments

由 和自甴很熟 提交于 2020-01-06 23:47:49
问题 I'm attempting to migrate from Sass to postCSS and testing out postcss-simple-vars gulp plugin. I'm using Webstorm IDE, which automatically uses javascript style comments (//) in .scss files, so my non-block comments are all // comments, not /* */. postcss-simple-vars throws errors at all // comments, even with the silent option set to true. Here's my gulp task: gulp.task('postcss', function () { return gulp .src('./styles/sass2/*.scss') .pipe($.postcss( [ vars({ silent: true, variables:

：not（）伪类可以有多个参数吗？

由 谁说胖子不能爱 提交于 2020-01-06 15:36:29
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 我试图选择除 radio 和 checkbox 之外的所有 type s的 input 元素。 许多人表明，您可以在 :not 多个参数，但是无论如何我尝试都不能使用 type 。 form input:not([type="radio"], [type="checkbox"]) { /* css here */ } 有任何想法吗？ #1楼 我对此有些麻烦，并且“ X：not（）：not（）”方法对我不起作用。 我最终采取了这种策略： INPUT { /* styles */ } INPUT[type="radio"], INPUT[type="checkbox"] { /* styles that reset previous styles */ } 它几乎没有那么有趣，但是当：not（）好战时，它对我有用。 这不是理想的，但很可靠。 #2楼 如果您在项目中使用SASS，则我已经构建了这个mixin以使其按照我们都希望的方式工作： @mixin not($ignorList...) { //if only a single value given @if (length($ignorList) == 1){ //it is probably a list variable so set ignore list

Why is Webpack ignoring my CSS files?

由 被刻印的时光 ゝ 提交于 2020-01-04 14:14:35
问题 I'm trying to get webpack to compile my CSS files (using PostCSS) to a separate file. From the documentation, it seems like this is exactly what ExtractTextPlugin should do. However, I cannot get webpack to do anything at all with my CSS files. The relevant project structure: dist ⎣js ⎣bundle.js public ⎣css ⎣style.css* src ⎣css ⎣index.css * file doesn’t exist (hasn’t been created) webpack.config.babel.js import webpack from 'webpack'; import path from 'path'; import ExtractTextPlugin from

webpack with less and postcss autoprefixer

由 女生的网名这么多〃 提交于 2019-12-30 07:32:08
问题 I'm new to webpack and I'm trying to set everything up to work on a react project. I have managed to get everything working in webpack as expected but have hit a road block with autoprefixer. I have followed the docs for both post css and autoprefixer and I'm obviously missing something important here or have done something daft. can you please take a look at my config and let me know if you have any suggestions. Other postcss plugins are working fine like nanocss. althought I have tried

解决No PostCSS Config found错误

由 半城伤御伤魂 提交于 2019-12-28 10:09:29
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在项目根目录新建postcss.config.js文件，并对postcss进行配置 编辑内容： module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } } 然后npm run dev,果然成功运行 来源： oschina 链接： https://my.oschina.net/shxjinchao/blog/3148912

vue vw适配方案

由 為{幸葍}努か 提交于 2019-12-26 01:16:26
转载： https://www.w3cplus.com/mobile/vw-layout-in-vue.html ： https://www.w3cplus.com/css/vw-for-layout.html 相关知识： vw，1vw为设备window.innerWidth的1%。 1、新建vue项目 2、安装相关依赖 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --S 3、配置.postcssrc.js module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 750, // (Number) The width of the viewport. viewportHeight:
订阅 postcss