今天在webpack.config.js中配置sass时遇到一个问题
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[1] should be one of these:
["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, -> A rule. Details: -> A rule description with conditions and effects -> A rule description with conditions and effects for modules.
npm install sass-loader node-sass -D
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loder'],
},
此时出现了上诉问题
通过查找webpack文档发现,文档中使用的语法与上述配置不一致,可能是版本问题导致了上诉问题
修改第二步的配置
{
test: /\.scss/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'sass-loader'
).concat({
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, './../src/styles/main.scss'),
],
},
}),
sideEffects: true,
},
{
test: /\.scss/, //配置sass转css
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
{
loader: 'sass-resources-loader',
options: {
sourceMap: true,
resources: [
path.resolve(__dirname, './../src/styles/main.scss'),
],
},
},
],
},