今天在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.
先看出现错误时的配置步骤
- 安装sass:通过命令行安装sass-loader和node-sass
npm install sass-loader node-sass -D
- 配置webapck.config.js,匹配scss文件结尾,使用sass解析成css
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loder'],
},
此时出现了上诉问题
通过查找webpack文档发现,文档中使用的语法与上述配置不一致,可能是版本问题导致了上诉问题
解决方式
修改第二步的配置
{
test: /\.scss/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
问题2:在使用sass-resources-loader进行配置全局变量时,使用concat配置时,报错变量未定义(说明配置不成功)
{
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,
},
解决方式:不在此处concat连接配置,而是在匹配.scss文件时配置,具体配置如下
{
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'),
],
},
},
],
},