"Unknown word" error showing after adding postcss-loader
Solution 1
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
loader: "postcss-loader",
}
},
Is declared without a test:
, so it is being used always
Solution 2
I kept getting "unknown word" error as well. It was a result that css cannot read comments with // but scss can... So I had to add the postcss-scss
to the options after installing it with:
npm --save install postcss-scss
or (if you use Yarn)
yarn add --dev postcss-scss
(webpack.config.js)
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
ident: 'postcss-scss',
syntax: 'postcss-scss',
plugins: () => [require('postcss-flexbugs-fixes')()]
}
}
]
},
plugins: [
new WebpackNotifierPlugin({
alwaysNotify: true,
title: 'Enterprise',
contentImage: path.join(__dirname, 'image.png')
})
]
};
Solution 3
This might help someone, or me later again.
I got this error because instead of
@import '../../common.scss';
In my SCSS, I had mistakenly written
@import url('../../common.scss');
Removing the url() function got rid of the error.
Related videos on Youtube
Comments
-
Nagesh Fultambkar almost 2 years
I am trying to add
postcss loader
in my webpack but after addingpostcss loader
showingUnknown word error
. I also attached error screenshot. please find attachment. Not sure what error is....I also added
postcss-loader
,sass-loader
,css-loader
,style-loader
. If i am doing anything wrong please tell me guys.Below is my loaders in config file and package.json file.
module: { rules: [ { test: /\.tsx?$/, use: ["babel-loader", "ts-loader", "tslint-loader"] }, { test: /\.css$/, include: __dirname + "./src/css", use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, importLoaders: 1 } }, 'postcss-loader', ] }, { test: /\.scss$/, use: [ "style-loader", { loader: "css-loader", options: { sourceMap: isDevMode } }, { loader: "sass-loader", options: { sourceMap: isDevMode } } ] }, { test: /\.(sa|sc|c)ss$/, use: [ isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', ], }, { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')], loader: "postcss-loader", } }, { test: /\.(ttf|eot|woff|woff2)$/, use: { loader: "file-loader", options: { name: "fonts/[name].[ext]", }, }, }, { test: /\.(jpe?g|png|gif|svg|ico)$/i, use: [ { loader: "file-loader", options: { outputPath: "assets/" } } ] }, { test: /\.js$/, exclude: /node_modules/, use: [ 'babel-loader' ] } ] },
package.json
"dependencies": { "cssnano": "4.0.5", "postcss-cssnext": "3.1.0", "postcss-import": "12.0.0", "prop-types": "15.6.0", "react": "15.6.2", "react-dom": "15.4.2", "react-redux": "4.4.9", "react-router": "3.0.2", "react-router-dom": "4.2.2", "redux": "^3.5.2", "redux-logger": "^2.6.1", "redux-promise": "^0.5.3", "redux-react-session": "2.2.0", "redux-thunk": "2.3.0", "sugarss": "2.0.0", "superagent": "3.8.1" }, "devDependencies": { "autoprefixer": "^9.0.2", "babel-loader": "^7.1.4", "clean-webpack-plugin": "^0.1.19", "css-loader": "^0.28.11", "eslint": "3.15.0", "extract-text-webpack-plugin": "1.0.1", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.1.0", "mini-css-extract-plugin": "0.4.2", "open": "0.0.5", "postcss-loader": "^3.0.0", "sass-loader": "^7.0.3", "style-loader": "^0.20.3", "webpack": "4.17.1", "webpack-dev-middleware": "1.6.1", "webpack-dev-server": "3.1.5", "webpack-hot-middleware": "2.12.2", "webpack-md5-hash": "0.0.5" },
-
Nagesh Fultambkar over 5 yearsThank you for your reply. but i am getting same problem. I updated above config file. Can you please check am i doing correct or not ?
-
UXDart over 5 yearsyou still have a
loader: 'postcss-loader',
in the middle of the file without atest:
-
vsync about 5 yearsThis did not help me
-
Crystal almost 4 yearsConfused where is the
test:
in that code snippet? How was this selected as the correct answer? -
Anton Rusak over 3 yearsThis answer duplicates the one given by @Crystal.
-
southpaw93 over 2 yearsNo
test:
is this example...