gpt4 book ai didi

javascript - 添加 postcss-loader 后显示 "Unknown word"错误

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:39:10 27 4
gpt4 key购买 nike

我正在尝试在我的 webpack 中添加 postcss loader 但在添加 postcss loader 后显示 Unknown word error。我还附上了错误截图。请查收附件。不确定是什么错误.... enter image description here

我还添加了postcss-loadersass-loadercss-loaderstyle-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'
]
}

]
},

包.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"
},

最佳答案

我也一直收到“未知单词”错误。这是 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')
})
]
};

关于javascript - 添加 postcss-loader 后显示 "Unknown word"错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51978537/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com