最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Adding Autoprefixer in parcel.js for deployed website broke all website styles? - Stack Overflow

programmeradmin5浏览0评论

I have a deployed project built with the Parcel.js bundler.

After applying CSS Autoprefixer and redeploying the website almost all of my website's styles are broken. I'm really not sure what has caused this and unfortunately I could not find even one similar question for the problem I'm having.

I first added Autoprefixer in my dev-dependencies:

"devDependencies": {
    "autoprefixer": "^9.5.1",
    "parcel-bundler": "^1.12.3",
    "postcss-modules": "^1.4.1"
  },

Then I created a .postcssrc config file in my root folder containing: (I used quite a bit of CSS-Grid for layouts in the site hence the following configurations)

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": "autoplace"
    }
  }
}

I also created a .browserslistrc config file for browser targets also in the root folder containing:

defaults

I chose the defaults configuration for the browser targets because it was mentioned in the Autoprefixer documentation that the defaults option contains a good variety of browsers and because i didn't have any specific needs this seemed like the best option to go for.

I've tried my best to give an accurate description of the events, if you need more information please let me know.

UPDATE: I thought the problem is the "autoprefixer": { "grid": "autoplace" as mentioned in the autoprefixer documentation, that going for this option can cause problems to already deployed/established websites that didn't have autoprefixer. So I rolled back my changes to it's pre-autoprefixer state wen't through all the steps again but this time I did not enable the grid: autoplace option and went for the default grid: true BUT again I have the same problem.

I think this might have something to do with Parcel or how I am using postcss in Parcel.

I have a deployed project built with the Parcel.js bundler.

After applying CSS Autoprefixer and redeploying the website almost all of my website's styles are broken. I'm really not sure what has caused this and unfortunately I could not find even one similar question for the problem I'm having.

I first added Autoprefixer in my dev-dependencies:

"devDependencies": {
    "autoprefixer": "^9.5.1",
    "parcel-bundler": "^1.12.3",
    "postcss-modules": "^1.4.1"
  },

Then I created a .postcssrc config file in my root folder containing: (I used quite a bit of CSS-Grid for layouts in the site hence the following configurations)

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": "autoplace"
    }
  }
}

I also created a .browserslistrc config file for browser targets also in the root folder containing:

defaults

I chose the defaults configuration for the browser targets because it was mentioned in the Autoprefixer documentation that the defaults option contains a good variety of browsers and because i didn't have any specific needs this seemed like the best option to go for.

I've tried my best to give an accurate description of the events, if you need more information please let me know.

UPDATE: I thought the problem is the "autoprefixer": { "grid": "autoplace" as mentioned in the autoprefixer documentation, that going for this option can cause problems to already deployed/established websites that didn't have autoprefixer. So I rolled back my changes to it's pre-autoprefixer state wen't through all the steps again but this time I did not enable the grid: autoplace option and went for the default grid: true BUT again I have the same problem.

I think this might have something to do with Parcel or how I am using postcss in Parcel.

Share Improve this question edited Nov 11, 2019 at 23:07 Dharman 33.4k27 gold badges101 silver badges147 bronze badges asked May 20, 2019 at 22:19 Ikai YanasakiIkai Yanasaki 1392 silver badges7 bronze badges 5
  • It might help, if you can figure out, what has changed in your CSS. – user5591717 Commented May 20, 2019 at 22:26
  • Well my minified css output file in my dist folder is super hard to read, but I can see the prefixes, because before i had none. It's a disaster! Almost all of the styling is broken, all margins, padding, positions etc. Even background colors and such. – Ikai Yanasaki Commented May 20, 2019 at 22:40
  • You could check for CSS errors in dev tools, if you haven't already. – user5591717 Commented May 20, 2019 at 22:57
  • @Fee-fi-fo-fum...I just checked and all styles are removed from every section apart from my footer, and even the footer is not as it was. All that has remained is the universal resets that i applied and the font-import. – Ikai Yanasaki Commented May 20, 2019 at 23:12
  • I haven't fixed the issue yet, but i found a chunky section of the documentation explaining that things can go very wrong if you use the grid: autoplace option on already established/deployed websites. – Ikai Yanasaki Commented May 21, 2019 at 0:05
Add a ment  | 

3 Answers 3

Reset to default 6

Post-css es with autoprefixer out of the box.

Parcel bundler es with Post-css out of the box.

So the only package you need is parcel-bundler in your package.json. The extra package installations may be what's causing the problem.

To configure it all correctly try this sample postcss setup, where crucially the autoprefixer object and the overrideBrowserslist array are not empty, or like the other answer here where it is just set to true, that didn't work for me. Adding the browserslist (recently updated to overrideBrowserslist) array makes the prefixes work:

{
  ...

  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "sass": "^1.25.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "overrideBrowserslist": [
          "> 1%",
          "last 4 versions",
          "ie >= 9"
        ]
      }
    }
  }
}

After adding a transition to an element in the CSS, the prefixes showed after inspecting and looking at the styles in dev tools.

Try only with this:

{  
  "plugins": {
    "autoprefixer": true
  }
}

I got the same issues. Actually after I checked the css, my classes got renamed with hash at the end.

The issues is described here: https://github./parcel-bundler/parcel/issues/644

It is caused by the paramters modules: true. Set it to false and it works !

发布评论

评论列表(0)

  1. 暂无评论