I am new in PostCSS and I don't know, how to add preCSS plugin. Basically, I am using Tailwind, where is recommend PostCSS. But till today, I always used Sass in my projects. With this preCSS plugin, I can use Sass syntax - that's the goal.
My packagake.json
{
"name": "zs-skalova-layout-only",
"version": "1.0.0",
"description": "",
"main": "tailwind.config.js",
"scripts": {
"dev": "postcss css/tailwind.css -o tailwind-compil.css"
},
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.1.0",
"postcss": "^8.2.1",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.0.2"
},
"devDependencies": {
"precss": "^4.0.0"
}
}
and here is my postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
precss: {},
}
}
No Webpack, Gulp or etc. solutions please.
Thanks for your help
Related
I am a beginner, just started to learn express and webpack, I tried to use the initial express file
Trying to use webpack for packaging, I keep getting errors
The reason for this is because I want to run my system in a non-node.js environment
Is my direction wrong?
The express project is create with express --view=ejs myapp
I didn't make any changes
webpack.config.js
const path = require('path');
const clientConfig = {
resolve: {
fallback: {
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
entry: {
'index': './app.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
}
}
module.exports = [clientConfig];
package.json
{
"name": "myapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"webpack": "webpack"
},
"browser": {
"crypto": false
},
"dependencies": {
"cookie-parser": "~1.4.4",
"crypto-browserify": "^3.12.0",
"debug": "~2.6.9",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"path": "^0.12.7",
"twig": "~0.10.3"
},
"main": "app.js",
"devDependencies": {
"webpack": "^5.26.3",
"webpack-cli": "^4.5.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Thanks for any guidance and comments
You can't run Express in a non-nodejs environment. Express depends upon the nodejs run-time library such as the http module so it can't run without that library. webpack can't overcome that.
You can use webpack to build either plain Javascript with no external dependencies or with dependencies that you have independent libraries for that can be included in the webpack bundle or with dependences that are present in whatever environment you want to run it in.
I have been learning webpack and babel...
All things are working fine but my webpack config is not working as it should, I think something I missed here.
Here are my webpack.config.js code
const path = require('path');
module.export = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename:'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
publicPath:'/assets/'
},
module:{
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['#babel/preset-env']
}
}
}]
}
};
and here are all dev dependencies
{
"name": "chapter-22",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "./node_modules/.bin/webpack src/index.js -o dist/assets/bundle.js --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "Jabid",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"#babel/polyfill": "^7.11.5",
"webpack-dev-server": "^3.11.0"
}
}
problem solved , i mistakenly wrote module.export instead of module.exports.
I am trying to use the Extract Text Webpack Plugin, but I have not been able to generate a new css file for the compiled sass files.
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : './src/app.js',
output : {
filename : './dist/bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename : 'app.bundle.css'
}),
]
}
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
app.js:
var css = require('../css/app.scss');
console.log("This is a test Hi from webpack !!!");
I able to generate a new css file for the compiled sass files
please go through repo for your reference working example
your configuration looks good only ,my be you miss the path or forgot load css file in index.html or may be you did not create any scss files
live example
When running tests using Jest, I need my .babelrc file for it to run.
When running npm start, it only works without the .babelrc file, with the error:
Unknown option: C:\...\babelrc.presets
I'm guessing it's to do with the version of babel I have, but I have tried to following "answer" to this question: Unknown option: .../.babelrc.presets
but to no avail.
Here is my package.json:
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "src/app.js",
"author": "x",
"license": "ISC",
"scripts": {
"start": "webpack-dev-server --port 3000",
"test": "jest"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"react",
"react-dom",
"react-addons-test-utils",
"fbjs"
]
},
"devDependencies": {
"babel-core": "^6.7.*",
"babel-jest": "^11.0.2",
"babel-loader": "^5.0.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"jest-cli": "^11.0.2",
"react-addons-test-utils": "^0.14.8",
"webpack": "^1.12.*",
"webpack-dev-server": "^1.10.*"
},
"dependencies": {
"react": "^0.13.3"
}
}
and my .babelrc:
{
"presets": [
"react",
"es2015"
]
}
and my webpack config, if it's relevant:
module.exports = {
entry: [
'./src/app.js'
],
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/
}]
}
};
You've listed babel-core#^6 but are using babel-loader#5, update your babel-loader to the most recent version.
I can work with babel src --out-dir lib, but not with npm run XXX using babel-core#6.20.0 and babel-loader#6.2.9 .While I install Babel-cli#6.18.0 CLI globally on my machine, after I install babel-cli# locally project, it can works with npm run.
Clearly I'm missing something incredibly simple here, so I apologize in advance for the dumb question. I have no errors so it's difficult to Google.
I'm trying to export something, anything, from an npm package written in ES6, compiled with babel and webpack.
I followed this http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/ for my webpack setup, leaving it mostly-identical, but find it below for reference. I made a test export repo just to make sure it wasn't anything in the code of the module I was trying to export; find that below as well. Any help would be greatly appreciated; at this point I feel like I'm taking crazy pills.
src/index.js
const test = "test";
export default test;
webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: [
"babel-polyfill",
"./src/index"
],
output: {
//path: path.join(__dirname, "lib"),
//filename: "[name].js"
filename: "./lib/index.js"
},
// import bare, .js, and .jsx files
resolve: {
extensions: ["", ".js", ".jsx"]
},
devtool: "source-map",
module: {
loaders: [
{
loader: "babel-loader",
// only load src
include: [
path.resolve(__dirname, "src")
],
// only compile .js and .jsx files
test: /\.jsx?$/,
query: {
plugins: ["transform-runtime", "transform-decorators-legacy"],
//plugins: ["transform-decorators-legacy"],
presets: ["es2015", "stage-0", "react"]
}
},
]
},
debug: true
};
package.json
{
"name": "test-package",
"version": "0.0.1",
"description": "test",
"main": "lib/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx/xxx.git"
},
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"es6"
],
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/xxx/xxx/issues"
},
"homepage": "https://github.com/xxx/xxx#readme",
"dependencies": {
"babel-polyfill": "^6.5.0",
"babel-runtime": "^6.5.0"
},
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack -p
other project
npm i ../test-package
(verify actually installed, search for "test" in lib/index.js and find what should be the export)
import test from "test-package";
console.log(test);
console.log(Object.keys(test));
output: empty object, empty array
Why not trying
import * as test from "test-package";
And then
console.log(test);