因此,我尝试使用Bulma并导致无法导入_varibales.sass
,该文件夹位于src文件夹中。因此,我认为这是因为我没有将Webpack配置为支持Sass。
因此,我按照本教程中的配置说明进行操作,但是随后出现加载程序错误。这是我第一次使用原始Webpack而不是CRA。我这样做是因为我想进一步了解Webpack和Babel。
我尝试过的另一件事是在配置中找到的Webpackdart-sass
配置。
我现在的错误是:
[webpack-cli]无效的配置对象。已使用与API架构不匹配的配置对象初始化Webpack。
configuration.module.rules [2]应该是以下之一:[“ ...” | 对象{编译器,依赖项,descriptionData,强制执行,排除,生成器,包含,发布者,issuerLayer,layer,loader,mimetype,oneOf,选项,解析器,realResource,解析,资源,resourceFragment,resourceQuery,规则,sideEffects,test,类型,使用?},...]
->一条规则。详细信息:* configuration.module.rules [2] .loader应为非空字符串。
我的webpack.config.js
样子是这样的:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isDevelopment = process.env.NODE_ENV === 'development'
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
},
{
test: /\.module\.s(a|c)ss$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: isDevelopment
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.s(a|c)ss$/,
exclude: /\.module.(s(a|c)ss)$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') }),
new Dotenv(),
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name.css]' : '[name].[hash].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
})
],
resolve: {
extensions: [".js", ".jsx", ".sass", ".scss"]
}
};
您使用的WebPack版本5+。降级到WebPack的较低版本以确保兼容性。
"webpack": "^4.41.5"
如果您需要使用5+版本或要了解有关webpack.config.json
配置文件中错误的更多信息,请参阅Webpack从v4到v5的迁移。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句