使用postcss-与Svelte规范

Question

我没有使用后规范和细长-预处理将正式起跑导入Svelte。

我的rollup配置：

…
plugins: [
  svelte({
    preprocess: sveltePreprocess({
      sourceMap: !production,
      defaults: {
        style: "scss",
      },
      scss: {
        prependData: '@import "sass-mediaqueries/media-queries";',
      },
    }),
    compilerOptions: {
      // enable run-time checks when not in production
      dev: !production,
    },
    postcss: {
      plugins: [
        // postcssImport(postcssNormalize().postcssImport({ path: ["src"] })),
        postcssNormalize(),
        autoprefixer(),
      ]
    }
  }),
  // we'll extract any component CSS out into
  // a separate file - better for performance
  css({ output: "bundle.css" }),
  …

我在App.svelte中像这样导入它

<style global>
  @import-normalize;
  @import-sanitize;
  @import "global.scss";
</style>

没有规范化，也没有净化css进入捆绑的bundle.css。没有错误或警告。

正如您在上面的配置中所看到的，我还尝试使用postcss-进口插件导入它，就像在postcss-normalize页面和Github问题中所发现的那样。到目前为止还没有运气。任何帮助都很感激。

Answer 1

我建议你学习SvelteKit。要将normalize.css添加到SvelteKit，请执行以下步骤：

1. $ npm install normalize.css
2. $ touch src/routes/__layout.svelte

在__layout.svelte中，必须添加以下内容：

<script>
  import 'normalize.css'
</script>

<slot/>

Answer 2

1. npm i -save-dev sass
2. npm i --save sanitize.css
3. touch src/routes/__layout.svelte

将此添加到__layout.svelte中

<style global lang='scss'>
  @import 'sanitize.css';
</style>

<slot/>

它以这种方式工作(我使用的是SvelteKit) -所有导入的CSS都包含到包中。

P.S. sanitize.css包括normalize.css --无需同时安装