Webpack css-loader 不解析别名
Webpack css-loader does not resolve aliases
目前正在维护 运行 React v15 的项目。升级 Webpack 3 > 4，Babel 6 > 7，css-loader 0.28.x > 3.0.0 等
最初，更新React并使用所有react-codemod + jscodeshift来转换js文件。虽然那个阶段的版本还不稳定，但它加载并显示了正确的样式等
我觉得奇怪的是，在更新 file-loader、css-loader、babel 和相关包之后，我一直得到 Module not found: Error: Can't resolve，如下所示：
ERROR in ./app/sharedComponents/TitleGeneric/style.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./app/sharedComponents/TitleGeneric/style.css)
Module not found: Error: Can't resolve './sharedStyles/typography.css' in '/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric'
resolve './sharedStyles/typography.css' in '/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric'
using description file: /Users/userX/www/my-project-ui/package.json (relative path: ./app/sharedComponents/TitleGeneric)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/userX/www/my-project-ui/package.json (relative path: ./app/sharedComponents/TitleGeneric/sharedStyles/typography.css)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.json doesn't exist
as directory
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css doesn't exist
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css]
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.wasm]
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.mjs]
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.js]
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.json]
@ ./app/sharedComponents/TitleGeneric/style.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./app/sharedComponents/TitleGeneric/style.css) 5:10-107 12:44-141
@ ./app/sharedComponents/TitleGeneric/style.css
@ ./app/sharedComponents/TitleGeneric/TitleGeneric.js
@ ./app/pages/Knowledge/Bricks/Bricks.js
@ ./app/pages/Knowledge/Bricks/BricksContainer.js
@ ./app/loaders/pages.js
@ ./app/router/routes.js
@ ./app/index.js
@ multi core-js/stable ./app
发帖前我做了很多测试、尝试和观察，修改了很多代码也没有找出问题所在；我也在网上做了很多研究。最后检查了 Whosebug 中是否有任何关于此的帖子，我相信目前没有。
这是 package.json 文件：
{
"name": "Foobar",
"version": "1.0.0",
"main": "index.js",
"scripts": {
...
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"license": "ISC",
"engines": {
"node": ">=8.12.0"
},
"nyc": {
"include": [
"app/**/*.js"
],
"require": [
"@babel/register"
],
"all": "true",
"cache": "true",
"reporter": [
"text",
"html"
],
"sourceMap": "false",
"instrument": "false"
},
"dependencies": {
"@babel/core": "^7.5.0",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/preset-env": "^7.5.3",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.4.4",
"@moola/moola-component-library": "^0.3.9",
"@moola/moola-nuka-carousel": "^2.0.4-2",
"axios": "^0.15.3",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"babel-plugin-lodash": "^3.3.4",
"bootstrap": "^3.3.7",
"highcharts": "^4.2.6",
"highcharts-more": "^0.1.2",
"intl": "^1.2.5",
"js-cookie": "^2.1.3",
"jwt-decode": "^2.1.0",
"mime-types": "^2.1.12",
"npm": "^5.8.0",
"numeral": "^1.5.3",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-addons-create-fragment": "^15.6.0",
"react-bootstrap": "^0.30.8",
"react-dom": "^16.8.6",
"react-highcharts": "^16.0.2",
"react-highstock": "^1.0.2",
"react-intl": "^2.4.0",
"react-intl-redux": "^2.1.1",
"react-markdown-renderer": "^1.4.0",
"react-modal": "3.8.2",
"react-paginate": "^5.2.2",
"react-redux": "^5.1.1",
"react-router-redux": "^4.0.7",
"react-transition-group": "^2.1.0",
"redux": "^4.0.1",
"redux-debounced": "^0.5.0",
"redux-form": "^7.4.2",
"redux-segment": "^1.6.1",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"@babel/plugin-proposal-export-default-from": "^7.5.2",
"acorn": "^6.2.0",
"add-asset-html-webpack-plugin": "^3.1.3",
"autoprefixer": "^9.6.1",
"babel-plugin-module-resolver": "^3.2.0",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"core-js": "^3.1.4",
"create-react-class": "^15.6.3",
"css-loader": "^3.0.0",
"cyclist": "^1.0.1",
"enzyme": "^2.9.1",
"es6-promise": "^4.1.0",
"eslint": "^6.0.1",
"eslint-config-standard": "^13.0.0-1 ",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-standard": "^4.0.0",
"express": "^4.16.4",
"extract-loader": "^3.1.0",
"file-loader": "^4.0.0",
"git-revision-webpack-plugin": "^2.4.0",
"html-webpack-plugin": "^3.2.0",
"html2plaintext": "^2.0.1",
"husky": "^0.11.9",
"jsdom": "^9.4.1",
"json-server": "^0.14.0",
"jspolyfill-array.prototype.find": "^0.1.3",
"jspolyfill-array.prototype.findIndex": "^0.1.0",
"leasot": "^4.7.1",
"lodash-webpack-plugin": "^0.11.5",
"mini-css-extract-plugin": "^0.7.0",
"mocha": "^2.5.3",
"mocha-jenkins-reporter": "^0.2.3",
"mock-css-modules": "^1.0.0",
"moment": "^2.22.2",
"postcss-loader": "^3.0.0",
"postcss-modules-values": "^1.3.0",
"randexp": "^0.5.3",
"react-test-renderer": "^16.8.6",
"sinon": "^1.17.4",
"string-replace-webpack-plugin": "^0.1.3",
"style-loader": "^0.23.1",
"url-loader": "^2.0.1",
"webpack": "^4.35.3",
"webpack-bundle-analyzer": "^1.4.1",
"webpack-cli": "^3.3.5",
"webpack-dev-middleware": "^2.0.6",
"webpack-dev-server": "^2.9.1",
"webpack-hot-middleware": "^2.22.1",
"webpack-merge": "^4.1.0",
"webpack-s3-plugin": "0.9.0"
},
"optionalDependencies": {
"fsevents": "*"
}
}
webpack基础配置文件：
const webpack = require('webpack')
const path = require('path')
const chalk = require('chalk')
const loaderRules = require('./loaders')
const setup = require('./setup')
const PATHS = setup.PATHS
const VALUES = setup.VALUES
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const IgnorePlugin = require('webpack/lib/IgnorePlugin')
const LodashReplacePlugin = require('lodash-webpack-plugin')
const isDev = process.env.npm_lifecycle_event !== 'vendor:production'
// Base configuration
const { analyticsKey, applicationPath, htmlLinkPath } = VALUES
let vendorManifest
try {
vendorManifest = require(path.join(PATHS.build, 'vendor.json'))
} catch (e) {
if (e.code !== 'MODULE_NOT_FOUND') {
throw e
}
/* eslint-disable no-console */
console.log(chalk.red('*** Moo.la script error ***'))
console.log(chalk.red('Vendor bundle/manifest not found.\nPlease run ') +
chalk.white('`npm run vendor`') +
chalk.red(' first to generate it, then try again.'))
/* eslint-enable no-console */
process.exit(1)
}
let plugins = [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: vendorManifest,
}),
new HtmlWebpackPlugin({
analyticsKey,
template: path.join(PATHS.app, 'shell', 'index.html'),
filename: 'index.html',
inject: 'body',
applicationPath,
htmlLinkPath,
}),
new AddAssetHtmlPlugin({
filepath: path.join(PATHS.build, 'vendor.dll.js'),
includeSourcemap: false,
}),
new IgnorePlugin(/^\.\/locale$/, /moment$/),
new LodashReplacePlugin(),
new webpack.DefinePlugin({
CDN_URL: JSON.stringify(VALUES.baseCdnUrl),
}),
]
const baseConfig = {
entry: {
index: ['core-js/stable', PATHS.app],
},
plugins,
resolve: {
modules: [
PATHS.app,
'node_modules',
],
alias: {
videos: path.resolve(__dirname, '../app/videos/'),
sharedStyles: path.resolve(__dirname, '../app/sharedStyles/'),
images: path.resolve(__dirname, '../app/images/'),
animated: path.resolve(__dirname, '../app/animated/'),
}
},
module: {
rules: loaderRules,
},
optimization: {
namedModules: true,
splitChunks: {
chunks: "all"
},
runtimeChunk: true,
concatenateModules: true,
},
output: {
path: PATHS.build,
filename: '[name]_bundle.js',
chunkFilename: '[name]_chunk.js',
},
}
module.exports = baseConfig
我也试过添加一个插件来从 Babel 解析，但运气不佳：
{
"presets": [
["@babel/preset-env", {
"targets": {
"ie": 11
},
"modules": false
}],
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
["module-resolver", {
"root": ["./app"],
"alias": {
"videos": "./app/videos/",
"sharedStyles": "./app/sharedStyles/",
"images": "./app/images/",
"animated": "./app/animated/"
}
}]
]
}
应用程序由 node server.js 启动，其中 server.js 看起来像（简化）：
const port = 8080
const path = require('path')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackConfigLocal = require('../webpack/config.local')
...
app.use(bodyParser.json())
router.use(webpackDevMiddleware(compiler, {
publicPath: '/',
logLevel: 'debug',
stats: {
colors: true,
hash: false,
version: true,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false,
},
}))
router.use(webpackHotMiddleware(compiler))
...
app.listen(port, () => console.log(`Development server listening on port ${port}`))
我 运行 没有想法，可能不得不将 Webpack、Babel 和所有相关的插件和包恢复到以前的版本。
我想知道是否有人可以发现问题所在或提供有关如何解决此问题的任何提示或想法！
谢谢！
我回到这个问题并注意到在 0 之后的某个时间点。28.x css-loader 需要前缀 ~ 作为别名。
中找到 "To import styles from a node_modules path (include resolve.modules) and for alias, prefix it with a ~"
目前正在维护 运行 React v15 的项目。升级 Webpack 3 > 4，Babel 6 > 7，css-loader 0.28.x > 3.0.0 等
最初，更新React并使用所有react-codemod + jscodeshift来转换js文件。虽然那个阶段的版本还不稳定，但它加载并显示了正确的样式等
我觉得奇怪的是，在更新 file-loader、css-loader、babel 和相关包之后，我一直得到 Module not found: Error: Can't resolve，如下所示：
ERROR in ./app/sharedComponents/TitleGeneric/style.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./app/sharedComponents/TitleGeneric/style.css)
Module not found: Error: Can't resolve './sharedStyles/typography.css' in '/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric'
resolve './sharedStyles/typography.css' in '/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric'
using description file: /Users/userX/www/my-project-ui/package.json (relative path: ./app/sharedComponents/TitleGeneric)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/userX/www/my-project-ui/package.json (relative path: ./app/sharedComponents/TitleGeneric/sharedStyles/typography.css)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.json doesn't exist
as directory
/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css doesn't exist
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css]
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.wasm]
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.mjs]
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.js]
[/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric/sharedStyles/typography.css.json]
@ ./app/sharedComponents/TitleGeneric/style.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./app/sharedComponents/TitleGeneric/style.css) 5:10-107 12:44-141
@ ./app/sharedComponents/TitleGeneric/style.css
@ ./app/sharedComponents/TitleGeneric/TitleGeneric.js
@ ./app/pages/Knowledge/Bricks/Bricks.js
@ ./app/pages/Knowledge/Bricks/BricksContainer.js
@ ./app/loaders/pages.js
@ ./app/router/routes.js
@ ./app/index.js
@ multi core-js/stable ./app
发帖前我做了很多测试、尝试和观察，修改了很多代码也没有找出问题所在；我也在网上做了很多研究。最后检查了 Whosebug 中是否有任何关于此的帖子，我相信目前没有。
这是 package.json 文件：
{
"name": "Foobar",
"version": "1.0.0",
"main": "index.js",
"scripts": {
...
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"license": "ISC",
"engines": {
"node": ">=8.12.0"
},
"nyc": {
"include": [
"app/**/*.js"
],
"require": [
"@babel/register"
],
"all": "true",
"cache": "true",
"reporter": [
"text",
"html"
],
"sourceMap": "false",
"instrument": "false"
},
"dependencies": {
"@babel/core": "^7.5.0",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/preset-env": "^7.5.3",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.4.4",
"@moola/moola-component-library": "^0.3.9",
"@moola/moola-nuka-carousel": "^2.0.4-2",
"axios": "^0.15.3",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"babel-plugin-lodash": "^3.3.4",
"bootstrap": "^3.3.7",
"highcharts": "^4.2.6",
"highcharts-more": "^0.1.2",
"intl": "^1.2.5",
"js-cookie": "^2.1.3",
"jwt-decode": "^2.1.0",
"mime-types": "^2.1.12",
"npm": "^5.8.0",
"numeral": "^1.5.3",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-addons-create-fragment": "^15.6.0",
"react-bootstrap": "^0.30.8",
"react-dom": "^16.8.6",
"react-highcharts": "^16.0.2",
"react-highstock": "^1.0.2",
"react-intl": "^2.4.0",
"react-intl-redux": "^2.1.1",
"react-markdown-renderer": "^1.4.0",
"react-modal": "3.8.2",
"react-paginate": "^5.2.2",
"react-redux": "^5.1.1",
"react-router-redux": "^4.0.7",
"react-transition-group": "^2.1.0",
"redux": "^4.0.1",
"redux-debounced": "^0.5.0",
"redux-form": "^7.4.2",
"redux-segment": "^1.6.1",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"@babel/plugin-proposal-export-default-from": "^7.5.2",
"acorn": "^6.2.0",
"add-asset-html-webpack-plugin": "^3.1.3",
"autoprefixer": "^9.6.1",
"babel-plugin-module-resolver": "^3.2.0",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"core-js": "^3.1.4",
"create-react-class": "^15.6.3",
"css-loader": "^3.0.0",
"cyclist": "^1.0.1",
"enzyme": "^2.9.1",
"es6-promise": "^4.1.0",
"eslint": "^6.0.1",
"eslint-config-standard": "^13.0.0-1 ",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-standard": "^4.0.0",
"express": "^4.16.4",
"extract-loader": "^3.1.0",
"file-loader": "^4.0.0",
"git-revision-webpack-plugin": "^2.4.0",
"html-webpack-plugin": "^3.2.0",
"html2plaintext": "^2.0.1",
"husky": "^0.11.9",
"jsdom": "^9.4.1",
"json-server": "^0.14.0",
"jspolyfill-array.prototype.find": "^0.1.3",
"jspolyfill-array.prototype.findIndex": "^0.1.0",
"leasot": "^4.7.1",
"lodash-webpack-plugin": "^0.11.5",
"mini-css-extract-plugin": "^0.7.0",
"mocha": "^2.5.3",
"mocha-jenkins-reporter": "^0.2.3",
"mock-css-modules": "^1.0.0",
"moment": "^2.22.2",
"postcss-loader": "^3.0.0",
"postcss-modules-values": "^1.3.0",
"randexp": "^0.5.3",
"react-test-renderer": "^16.8.6",
"sinon": "^1.17.4",
"string-replace-webpack-plugin": "^0.1.3",
"style-loader": "^0.23.1",
"url-loader": "^2.0.1",
"webpack": "^4.35.3",
"webpack-bundle-analyzer": "^1.4.1",
"webpack-cli": "^3.3.5",
"webpack-dev-middleware": "^2.0.6",
"webpack-dev-server": "^2.9.1",
"webpack-hot-middleware": "^2.22.1",
"webpack-merge": "^4.1.0",
"webpack-s3-plugin": "0.9.0"
},
"optionalDependencies": {
"fsevents": "*"
}
}
webpack基础配置文件：
const webpack = require('webpack')
const path = require('path')
const chalk = require('chalk')
const loaderRules = require('./loaders')
const setup = require('./setup')
const PATHS = setup.PATHS
const VALUES = setup.VALUES
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const IgnorePlugin = require('webpack/lib/IgnorePlugin')
const LodashReplacePlugin = require('lodash-webpack-plugin')
const isDev = process.env.npm_lifecycle_event !== 'vendor:production'
// Base configuration
const { analyticsKey, applicationPath, htmlLinkPath } = VALUES
let vendorManifest
try {
vendorManifest = require(path.join(PATHS.build, 'vendor.json'))
} catch (e) {
if (e.code !== 'MODULE_NOT_FOUND') {
throw e
}
/* eslint-disable no-console */
console.log(chalk.red('*** Moo.la script error ***'))
console.log(chalk.red('Vendor bundle/manifest not found.\nPlease run ') +
chalk.white('`npm run vendor`') +
chalk.red(' first to generate it, then try again.'))
/* eslint-enable no-console */
process.exit(1)
}
let plugins = [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: vendorManifest,
}),
new HtmlWebpackPlugin({
analyticsKey,
template: path.join(PATHS.app, 'shell', 'index.html'),
filename: 'index.html',
inject: 'body',
applicationPath,
htmlLinkPath,
}),
new AddAssetHtmlPlugin({
filepath: path.join(PATHS.build, 'vendor.dll.js'),
includeSourcemap: false,
}),
new IgnorePlugin(/^\.\/locale$/, /moment$/),
new LodashReplacePlugin(),
new webpack.DefinePlugin({
CDN_URL: JSON.stringify(VALUES.baseCdnUrl),
}),
]
const baseConfig = {
entry: {
index: ['core-js/stable', PATHS.app],
},
plugins,
resolve: {
modules: [
PATHS.app,
'node_modules',
],
alias: {
videos: path.resolve(__dirname, '../app/videos/'),
sharedStyles: path.resolve(__dirname, '../app/sharedStyles/'),
images: path.resolve(__dirname, '../app/images/'),
animated: path.resolve(__dirname, '../app/animated/'),
}
},
module: {
rules: loaderRules,
},
optimization: {
namedModules: true,
splitChunks: {
chunks: "all"
},
runtimeChunk: true,
concatenateModules: true,
},
output: {
path: PATHS.build,
filename: '[name]_bundle.js',
chunkFilename: '[name]_chunk.js',
},
}
module.exports = baseConfig
我也试过添加一个插件来从 Babel 解析，但运气不佳：
{
"presets": [
["@babel/preset-env", {
"targets": {
"ie": 11
},
"modules": false
}],
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
["module-resolver", {
"root": ["./app"],
"alias": {
"videos": "./app/videos/",
"sharedStyles": "./app/sharedStyles/",
"images": "./app/images/",
"animated": "./app/animated/"
}
}]
]
}
应用程序由 node server.js 启动，其中 server.js 看起来像（简化）：
const port = 8080
const path = require('path')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackConfigLocal = require('../webpack/config.local')
...
app.use(bodyParser.json())
router.use(webpackDevMiddleware(compiler, {
publicPath: '/',
logLevel: 'debug',
stats: {
colors: true,
hash: false,
version: true,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false,
},
}))
router.use(webpackHotMiddleware(compiler))
...
app.listen(port, () => console.log(`Development server listening on port ${port}`))
我 运行 没有想法，可能不得不将 Webpack、Babel 和所有相关的插件和包恢复到以前的版本。
我想知道是否有人可以发现问题所在或提供有关如何解决此问题的任何提示或想法！
谢谢！
我回到这个问题并注意到在 0 之后的某个时间点。28.x css-loader 需要前缀 ~ 作为别名。
中找到 "To import styles from a node_modules path (include resolve.modules) and for alias, prefix it with a ~"