I don't know why I am getting this error when trying to use postcss and rollup — all plugins are up to date.
[dev:rollup] [!] (plugin postcss) Error: PostCSS plugin postcss-import requires PostCSS 8.
[dev:rollup] Migration guide for end-users:
[dev:rollup] https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
[dev:rollup] src/_bundle/main.css
[dev:rollup] Error: PostCSS plugin postcss-import requires PostCSS 8.
[dev:rollup] Migration guide for end-users:
[dev:rollup] https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
[dev:rollup] at Processor.normalize (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/processor.es6:117:15)
[dev:rollup] at new Processor (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/processor.es6:38:25)
[dev:rollup] at postcss (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/postcss.es6:34:10)
[dev:rollup] at /Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:213:28
[dev:rollup] at Generator.next (<anonymous>)
[dev:rollup] at asyncGeneratorStep (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:19:24)
[dev:rollup] at _next (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:41:9)
In package.json:
"dependencies": {
...
"postcss-import": "^13.0.0",
"postcss-nested": "^5.0.1",
"rollup": "^2.33.3",
"rollup-plugin-postcss": "^3.1.8",
...
},
"devDependencies": {
"postcss": "^8.1.10",
},
"peerDependencies": {
"postcss": "^8.1.10"
}
rollup.config.js
export default {
input: "src/_bundle/main.js",
output: {
sourcemap: dev,
format: "iife",
name: "main",
file: "dist/assets/main.bundle.js",
},
plugins: [
...
postcss({
plugins: [
postcssImport(),
postcssNested(),
],
extract: "dist/assets/main.bundle.css",
minimize: !dev,
}),
],
};
You have to install postcss npm package:
npm install --save-dev postcss
Related
I am using fullcalendar with vue3. I want to change change colors for button and text in fullcalendar.
vue version
"vue": "^3.2.26",
I am getting error
Syntax Error: Error: PostCSS plugin postcss-custom-properties requires
PostCSS 8.
I am following steps mentioned in fullcalendar documentation.
fullcalendar-vars.css
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
I have installed following packages
"postcss": "^8.4.7",
"postcss-calc": "^8.2.4",
"postcss-custom-properties": "^12.1.4",
"postcss-loader": "^6.2.1",
Added postcss.config.js at root
module.exports = {
plugins: [
require('postcss-custom-properties')({
preserve: false, // completely reduce all css vars
importFrom: [
'client/fullcalendar-vars.css' // look here for the new values
]
}),
require('postcss-calc')
]
}
And my vue.config.js as follow
const path = require("path");
module.exports = {
pages: {
index: {
entry: "./client/main.js",
},
},
outputDir: path.resolve(__dirname, "./client/dist"),
};
Also I would like to know, Do I need make any changes in vue.config.js?
PostCSS error
Vue CLI scaffolded projects already include PostCSS (including postcss, postcss-calc, and postcss-loader), so you don't need to install it in your project. The only dependency needed here is postcss-custom-properties.
To resolve the PostCSS error, you should uninstall the PostCSS dependencies that you had mistakenly added:
npm uninstall --save-dev postcss postcss-calc postcss-loader
Starting from scratch
To setup custom colors for FullCalendar in a Vue CLI scaffolded project:
Install postcss-custom-properties with:
npm install --save-dev postcss-custom-properties
Create postcss.config.js with the following PostCSS configuration:
// <projectRoot>/postcss.config.js
module.exports = {
plugins: [
require("postcss-custom-properties")({
preserve: false,
importFrom: [
"client/fullcalendar-vars.css",
],
}),
require("postcss-calc"),
],
}
Create fullcalendar-vars.css with the following CSS:
/* <projectRoot>/client/fullcalendar-vars.css */
:root {
--fc-border-color: green;
--fc-button-text-color: #ff0000;
}
Note: Changes to this file are not hot-reloaded, so the dev server must be restarted to reflect any updates.
Start the Vue CLI dev server with:
npm run serve
demo
Hei,
I updated my npm packages, including parcel, and after the update I could not run my application anymore and keep getting the following error:
🚨 Build failed.
#parcel/transformer-js: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods' (3:2)
My package.json looks like below:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "Klei Rama",
"license": "ISC",
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-private-methods": "^7.13.0",
"#parcel/transformer-sass": "^2.0.0-beta.2",
"parcel": "^2.0.0-beta.2",
"sass": "^1.32.8"
},
"dependencies": {
"fractional": "^1.0.0"
},
"plugins": [
"#babel/plugin-proposal-private-methods",
"#babel/plugin-proposal-class-properties"
]
}
I keep trying to delete node_modules, clear the cache, and delete package.json and then reinstall again but it does not work. I tried to use experimantal versions of parcel such as 2.0.0-beta.1 and 2.0.0-beta.2, but none of these version does not seem to work with experimental phase of babel plugins (class-properties and private-methods) (7.13.0). I was wondering if there is any certain version of babel plugins which can work either with parcel 2.0.0-beta.1 or 2.0.0-beta.2?
Hei you, install babel and the following plugins:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods"
]
}
Of course, also, to file .babelrc.
i tried to install preset-env for using environment variables. After that, my VueJS project got an error, i tried npm r #babel/preset-env, i tried npm i --save #babel-core but nothing changed. Any thoughts?
{
"presets": [
["env", { "modules": false }],
"stage-3",
],
"plugins": [["transform-runtime", { "polyfill": false, "regenerator": true }]]
}
Problem solved with using Babel version from vue.js webpack template repository.
npm r babel-core
add "babel-core": "^6.22.1" to package.json
npm i
I have an electron application using bower to resolve vendor deps and yarn for electron dependencies (node add-ons).
Because bower is deprecated I have migrated to yarn following this guide
how-to-migrate-away-from-bower
that uses bower-away
App launch fine but when I tried to build with electron-builder I got a problem with node module resolution.
$node_modules/.bin/build
• electron-builder version=20.8.1
• writing effective config file=dist/electron-builder-effective-config.yaml
Error: Unresolved node modules: angular, angular-animate, angular-aria, angular-messages, #bower_components/angular-translate, popper.js
at node_modules/electron-builder-lib/src/util/packageDependencies.ts:108:17
you should install of the package like this command
npm i angular --save
Use this answer: https://github.com/electron-userland/electron-builder/issues/2529#issuecomment-465185995
{
...
"dependencies": {
"bootstrap-vue": "^2.0",
"vue": "^2.6",
},
"optionalDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.14.7"
}
}
I have gone through many posts on github and stackoverflow. I have the following dev dependencies in my package.json for the es6 to es5 transpilation.
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babelify": "^8.0.0",
"browserify": "^15.0.0",
"grunt-browserify": "^5.2.0",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0"
I have setup a grunt task to compile my es6 file to es5 using babelify as transformer and browserify.
browserify: {
dist: {
src: [‘src/component/myes6.js’],
dest: ‘dist/src/component/myes5.js’,
options: {
transform: [
['babelify', {presets: [["es2015", { loose: true, modules: false }]]}]
],
browserifyOptions: {
debug: true
}
}
}
}
My es6 js file is importing a node module which is es6 js file and exported as function. I tried to follow many suggestion from various forums and looked through the babel/babelify/grunt-browserify documentation but could not land on a concrete conclusion.
Earlier I thought, it could be versions issue but I am now using all babel 6 version and latest browserify/grunt-browserify etc. But still, I am seeing the following error:
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Any help or pointers will be appreciated.
I've solved it installing esmify plugin npm install babel-plugin-esmify browser-resolve --save-dev.
browserify: {
dist: {
src: ['src/component/myes6.js'],
dest: 'dist/src/component/myes5.js',
options: {
plugin: [
[require('esmify')]
],
transform: [
['babelify', {
presets: [["es2015", { loose: true, modules: false }]]
}
]
}
}
},
I haven't tried running it, but the square brackets around your browserify dist/src shouldn't be there. Try running this file without them.