将自动前缀添加到Svelte＆Parcel项目中？

Question

我似乎无法获得autoprefixer与Parcel和Svelte一起使用。我在'svelte.config.js'文件中包含以下代码，但是即使它没有引发任何错误，它似乎也无法正常工作。 Sass正在正确编译，并且我有一个.browserlistrc文件。任何帮助，将不胜感激！

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: true,  
    postcss: {
        plugins: [require('autoprefixer')]
    }
  })
};

我安装了以下devDependencies

  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-svelte": "^4.0.5",
    "postcss": "^7.0.26",
    "postcss-load-config": "^2.1.0",
    "sass": "^1.24.2",
    "svelte": "^3.16.5",
    "svelte-preprocess": "^3.3.0"
  }

Answer 1

[svelte.config.js]适用于编辑器-语言服务器，而不是rollup工具。检查文档here

也请执行npm i -D autoprefixer。

并将另外2个文件放入您的项目根文件夹：

1. postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

2. 。browserslistrc

> 1%

运行npm run dev或npm run build后，您将在css文件中看到那些供应商前缀，或者可以在浏览器中检查它。