1

我正在尝试将postcss-normalize与 PostCSS 一起使用。我将插件放在列表中的任何地方都会导致它覆盖我的样式。我已经forceImport设置为 true，所以我不需要在任何地方导入它。

这是我的.postcssrc：

{
  "modules": false,
  "plugins": {
    "postcss-normalize": {
      forceImport: true,
    },
    "postcss-import": {},
    "postcss-nesting": {},
    "postcss-preset-env": {
      "autoprefixer": {
        "grid": true
      }
    },
    "postcss-color-mod-function": {},
    "postcss-font-magician": [
      {
          "variants": {
              "Open Sans": {
                  "300": [],
                  "400": [],
                  "700": []
              },
              "Arvo": {
                "400": [],
                "700": []
            }
          },
          "foundries": ["google"]
      }
    ]
  }
}

我也在使用 ParcelJS，我index.js像这样导入我的样式：

import "./css/layout.css"
import "./css/base.css"
import "./css/fonts.css"
import "./css/theme.css"

import header from "./modules/luxbar"
import jumbo from "./modules/jumbo"
import partners from "./modules/partners"
import instructions from "./modules/instructions"
import about from "./modules/about"
import faq from "./modules/faq";
import contact from "./modules/contact"
import testimonials from "./modules/testimonials";

header();
jumbo();           
partners();        
instructions();
about();           
testimonials()
faq('.faq-list');   
contact();

一个模块如下所示：

import $ from 'jquery'
import slick from 'slick-carousel'
import "./base.pcss"

export default () => {
    $('.partners__carousel').slick({
        autoplay: true,
        speed: 300,
        arrows: false,
        mobileFirst: true,
        centerMode: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        buttons: false,
    })
}

CSS 是在该模块中导入的index.js。

任何想法如何解决这个问题？为什么规范化器会覆盖我自己的样式？

4

0 回答 0