在依赖项中导入Sass文件时,Rollup CommonJS插件抛出错误



我在Sapper项目上使用Rollup,如下所示:https://github.com/darryl-snow/perfect-cookie

昨天我运行了npm update,从那以后,当我运行npm run dev时,我得到了以下错误:

✗ client
Invalid CSS after "...-features: list": expected expression (e.g. 1px, bold), was ".append($available-"
✗ server
Invalid CSS after "...-features: list": expected expression (e.g. 1px, bold), was ".append($available-"
internal/modules/cjs/loader.js:985
throw err;
^

我的汇总配置:

import resolve from '@rollup/plugin-node-resolve'
import replace from '@rollup/plugin-replace'
import commonjs from '@rollup/plugin-commonjs'
import svelte from 'rollup-plugin-svelte'
import postcss from 'rollup-plugin-postcss'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import config from 'sapper/config/rollup.js'
import pkg from './package.json'
const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD
const onwarn = (warning, onwarn) =>
(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\]@sapper[/\]/.test(warning.message)) || onwarn(warning)
const postcssOptions = () => ({
extensions: ['.scss', '.sass'],
extract: false,
minimize: true,
use: [
[
'sass',
{
includePaths: ['./src/theme', './node_modules'],
},
],
],
})
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
svelte({
dev,
hydratable: true,
emitCss: true,
}),
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
postcss(postcssOptions()),
legacy &&
babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
[
'@babel/preset-env',
{
targets: '> 0.25%, not dead',
},
],
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
[
'@babel/plugin-transform-runtime',
{
useESModules: true,
},
],
],
}),
!dev &&
terser({
module: true,
}),
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
svelte({
generate: 'ssr',
dev,
}),
resolve({
dedupe: ['svelte'],
}),
commonjs(),
postcss(postcssOptions()),
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
commonjs(),
!dev && terser(),
],
onwarn,
},
}

我尝试过rm -rf ./node_modules && npm install,但仍然出现相同的错误。看起来commonJS正在加载依赖项,并在需要CSS的地方找到一个,但却得到了Sass。。。我是个新手,有什么想法吗?

您可能应该考虑安装@rollup/plugin-commonjs的最新主要版本。你目前使用的Sapper有一个错误(我在运行你的回购而不是问题中的回购时遇到了这个错误(,它在后来的版本中得到了修复。

升级后,您的项目似乎启动良好。

当你在做的时候,升级其他主要版本的升级,很可能大部分都会顺利进行。