2

我刚刚提交并推动了一个小的 CSS 调整。在我的git pull服务器npm run build上forever restart __sapper__/build

现在在不同的文件中似乎有不止一个版本的相同 CSS 规则，如下图所示（这是在禁用浏览器缓存之后）：

无效的 CSS 规则

正确的规则是第三个（vertical-align: top; margin-top: 1px;），它似乎是 CSS 文件的组合。

知道“旧”规则来自哪里吗？以某种方式缓存在某个地方？

/编辑这是我的rollup.config.js：https ://gist.github.com/Bandit/bbcfd6c70ace5800765313dfe6021854

/EDIT2 有问题的样式在一个/style/global.scss文件中，该文件使用以下代码包含在/routes/_layout.svelte：

<style lang="scss" global>
    @import "./style/global.scss";
    main {
        background-color: white;
        padding: 5rem 1rem 0 1rem;
    }
</style>

猜测这是某种问题？为颜色/主题/排版等“注入”全局样式表的正确位置在哪里？

/EDIT3 包含的样式也_layout.svelte不止一次包含在 dev 中，这是一个屏幕截图：

重复的 CSS 规则

4

1 回答 1

1

这些选择器似乎不是来自 Svelte 组件，因为它们没有作用域（例如.split-button.svelte-a9ylb1）？还是您:global(.split-button)在 Svelte 组件中使用？

无论如何...我未能重现您的问题，但我的直觉是您的问题可能来自postcss插件。它有一个默认启用的inject选项。这个选项的作用是在你的文档中注入一个<style>标签；<head>执行此操作的代码由postcss插件附加到您的模块的 JS 中。这种行为很可能与正在做什么svelte-preprocess或rollup-plugin-svelte正在做什么发生冲突。

尝试在汇总配置中添加inject: false您正在使用的 3 个位置postcss，看看这是否有帮助。

另一种可能性可能是服务人员。我认为那里的问题不会产生您得到的结果，但我们永远不知道...您应该尝试“重新加载时更新”和“网络绕过”之类的选项（我不知道在您的浏览器）看看这是否有所作为。

否则，您可能需要显示更多代码。这个精确的 CSS 规则从何而来（例如 Svelte 组件中的样式标签、node_modules 中的 SCSS 文件……）？它是如何导入到您的项目中的（例如import './app.css'、@import './app.scss'等），以及在哪里导入？另外，令我惊讶的是，您postcss仅在服务器中拥有汇总插件（未在其中注册的插件sveltePreprocess）...您需要这个做什么，而不需要在客户端？

编辑：跟进

等等，什么？您的routes目录下有一些样式文件？routes/style/global.scss?

即使这样，我似乎也无法重现您的问题，但值得注意的是，Sapper 会尝试将它遇到的每个文件都包含在此目录下。如果你有一个插件可以让你导入*.scss文件，那么 Sapper 实际上会看到 a global.scss.js，所以它会认为它是一个服务器路由。如果没有可以吃 SCSS 的插件，它应该...崩溃。如果有问题的插件postcss的默认inject选项仍然是true，对我来说它看起来像一个明星嫌疑人......

无论如何，一些进一步的澄清点......

svelte-preprocess仅在文件中启用lang="xxx"、global属性在<style global ...>、中。.svelte

rollup-plugin-postcss可以另外添加，直接在plugins数组中（即不作为svelte插件的选项）。它支持import './foo.scss'，在.js文件中，以及在文件的<script>一部分.svelte。

（当然，PostCSS 对 SASS 的支持，或 Svelte 预处理对 PostCSS 的支持取决于你提供给它们的配置。）

好的。所以现在有多个地方可以让一些 CSS / SCSS 进入你的构建。我能想到的，有以下几种方式：

  • <link rel='stylesheet' href='global.css'>in src/template.html：这个将按原样复制而不进行处理。

  • 我想你也可以<link>在文件的标记（~HTML）部分有这样一个“自定义”标签.svelte，它会按原样包含在生成的 HTML 中（你仍然有责任让参考 CSS 文件可以访问在给定的 URL）。

  • import 'something.css'或 'import 'something.scss' in a.js or JS part of a.svelte injection file: these will get processed by bundler & plugins, and converted to some JS code, with optionally additional assets that the JS can reference (typically, a proper CSS file is generated, and some JS code dynamically injects atag for it at runtime; another approach is to generate some JS that will inject every CSS rule in the doc). PostCSS with: true` 使用 CSS + 注入标记方法。

  • <style>您在文件部分中编写的 CSS / SCSS 样式.svelte也将由 Svelte 插件以与之前描述的类似方式处理（preprocess接受原始 CSS 以外的任何内容所需的选项）；根据插件配置，它也可能会尝试为您的应用程序编写一个“.css”文件（请参阅文档。使用emitCssSapper 显然需要的选项，它应该为每个组件（或可能入口点）输出一个 CSS 文件。

在你的情况下，你说你已经rollup-plugin-postcss从你的配置中删除了，所以第三点（从 js 导入 css）应该不再可能了。

嗯...我只是希望这可以帮助您进一步调查。

我已经在这个 repo的一个分支上推送了一个 Sapper + PostCSS 示例。据我所知，它没有您在此处描述的问题。所以也许你可以通过与你所拥有的进行比较来找到问题。有关与 vanilla 官方模板的差异，请参阅此提交。

我还尝试添加rollup-plugin-postcss，就像您最初在配置中所做的那样，以便能够.scss从 Svelte 组件外部导入。但我没有找到一种不与 Sapper 冲突的方法。

编辑 2

哦，只是为了确定……在进行调查之前，一定要尝试一下rm -r __sapper__ && rm -r src/node_modules/@sapper（注意：node_modules在 下src，而不是在您的项目根目录中的那个）。我敢肯定你已经这样做了，但安全总比抱歉好。陈旧的东西可以住在那里。

于 2019-11-28T09:05:04.730 回答