"Unknown word" 添加 postcss-loader 后显示错误
"Unknown word" error showing after adding postcss-loader
我正在尝试在我的 webpack 中添加 postcss loader
但是在添加 postcss loader
之后显示 Unknown word error
.
我还附上了错误截图。请查收附件。
不确定是什么错误....
我还添加了postcss-loader
、sass-loader
、css-loader
、style-loader
。如果我做错了什么,请告诉我。
下面是我在配置文件和 package.json 文件中的加载程序。
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"
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
loader: "postcss-loader",
}
},
声明时没有 test:
,因此一直在使用
我也一直收到 "unknown word" 错误。结果是 css 无法使用 // 读取注释,但是 scss 可以...所以我不得不在安装后将 postcss-scss
添加到选项中:
npm --save install postcss-scss
或者(如果你使用 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')
})
]
};
运行 在终端中安装这个包
npm i postcss-loader
在我的例子中,我必须执行 sugarss
解析器。在 webpack.config.ts
的模块配置中。如果您使用另一个解析器,请进行相应更改。
...
{
loader: 'postcss-loader',
options: {
...
parser: 'sugarss', < ====
...
plugins: [
...
],
},
},
...
Crystal 的评论对我有用谢谢!您还可以在 postcss.config.js
中连接 postcss-scss
// postcss.config.js
module.exports = {
syntax: 'postcss-scss',
plugins: {
…
}
}
这可能对某人有帮助,或者稍后对我有所帮助。
我收到这个错误是因为
@import '../../common.scss';
在我的SCSS中,我写错了
@import url('../../common.scss');
删除 url() 函数消除了错误。
我正在尝试在我的 webpack 中添加 postcss loader
但是在添加 postcss loader
之后显示 Unknown word error
.
我还附上了错误截图。请查收附件。
不确定是什么错误....
我还添加了postcss-loader
、sass-loader
、css-loader
、style-loader
。如果我做错了什么,请告诉我。
下面是我在配置文件和 package.json 文件中的加载程序。
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"
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
loader: "postcss-loader",
}
},
声明时没有 test:
,因此一直在使用
我也一直收到 "unknown word" 错误。结果是 css 无法使用 // 读取注释,但是 scss 可以...所以我不得不在安装后将 postcss-scss
添加到选项中:
npm --save install postcss-scss
或者(如果你使用 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')
})
]
};
运行 在终端中安装这个包
npm i postcss-loader
在我的例子中,我必须执行 sugarss
解析器。在 webpack.config.ts
的模块配置中。如果您使用另一个解析器,请进行相应更改。
...
{
loader: 'postcss-loader',
options: {
...
parser: 'sugarss', < ====
...
plugins: [
...
],
},
},
...
Crystal 的评论对我有用谢谢!您还可以在 postcss.config.js
postcss-scss
// postcss.config.js
module.exports = {
syntax: 'postcss-scss',
plugins: {
…
}
}
这可能对某人有帮助,或者稍后对我有所帮助。
我收到这个错误是因为
@import '../../common.scss';
在我的SCSS中,我写错了
@import url('../../common.scss');
删除 url() 函数消除了错误。