Webpack4 - 模块解析失败:意外字符'@'
Webpack4 - Module parse failed: Unexpected character '@'
我是 webpack 的新手,我遇到了一个问题,我认为 css-loader 无法解析我的 @import
?
Webpack 配置:
const config = {
entry: {
main: __dirname + '/js/index.jsx'
},
devtool: 'eval-source-map',
plugins: [
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name].css' : '[name].[hash].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
})
],
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.s(a|c)ss$/m,
include: [
resolve(__dirname, '/sass'),
],
use: [
{
loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment,
implementation: require('sass')
}
}
]
}
]
}
}
文件夹结构:
application
|
|___static
| |____dist
|____js
| |____react components in here
|____sass
| |____abstracts
| | |____variables.scss
| |____pages
| | |_____app.scss
| |____main.scss
|____package-lock.json
|____package.json
|____webpack.config.js
main.scss
的内容在错误中。
错误:
ERROR in ./sass/main.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import 'abstracts/variables';
| @import 'pages/app';
|
@ ./js/components/App.jsx 20:0-37 35:19-25
@ ./js/routes.js
@ ./js/index.jsx
任何指点都会很棒!谢谢!
亚历克斯
问题是
include: [
resolve(__dirname, '/sass'),
],
已删除并按预期工作。
我是 webpack 的新手,我遇到了一个问题,我认为 css-loader 无法解析我的 @import
?
Webpack 配置:
const config = {
entry: {
main: __dirname + '/js/index.jsx'
},
devtool: 'eval-source-map',
plugins: [
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name].css' : '[name].[hash].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
})
],
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.s(a|c)ss$/m,
include: [
resolve(__dirname, '/sass'),
],
use: [
{
loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment,
implementation: require('sass')
}
}
]
}
]
}
}
文件夹结构:
application
|
|___static
| |____dist
|____js
| |____react components in here
|____sass
| |____abstracts
| | |____variables.scss
| |____pages
| | |_____app.scss
| |____main.scss
|____package-lock.json
|____package.json
|____webpack.config.js
main.scss
的内容在错误中。
错误:
ERROR in ./sass/main.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import 'abstracts/variables';
| @import 'pages/app';
|
@ ./js/components/App.jsx 20:0-37 35:19-25
@ ./js/routes.js
@ ./js/index.jsx
任何指点都会很棒!谢谢!
亚历克斯
问题是
include: [
resolve(__dirname, '/sass'),
],
已删除并按预期工作。