@import 未使用 PostCSS/CSSNext 应用

Posted 2023-03-06

【中文标题】@import 未使用 PostCSS/CSSNext 应用

【英文标题】：@import not applied using PostCSS/CSSNext

【发布时间】：2019-10-29 12:02:10

【问题描述】：

我正在使用带有 Webpack 4 的 React。我正在尝试在我的 index.css 中导入 BassCSS 类：

@import "basscss"
@import "basscss-colors"
@import "basscss-background-colors"

但是，似乎没有应用导入。 Webpack 不会抛出任何错误消息或警告。

例如，BassCSS 类red 不会使我的标题文本变红：

import React from 'react'

const Header = () => (
  <header className="red">
    <h1>My App</h1>
  </header>
)

export default Header

index.css 被导入到我的 index.js 中：

import './styles/index.css'

如果我注释掉我的导入并像这样手动定义red 类，它会使我的标题文本变红：

/* @import "basscss"
@import "basscss-colors"
@import "basscss-background-colors" */

.red 
  color: red;

使用webpack，我为CSS文件配置了style-loader、css-loader和postcss-loader：

...

    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
    ]

...

这就是我的postcss.config.js 的样子：

const postcssCssNext = require('postcss-cssnext')
const postcssImport = require('postcss-import')

module.exports = 
  plugins: [
    postcssCssNext,
    postcssImport
  ]

最后，我对package.json 的依赖：

...
  "devDependencies": 
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "dotenv": "^8.0.0",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss": "^7.0.17",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  ,
  "dependencies": 
    "basscss": "^8.1.0",
    "basscss-background-colors": "^2.1.0",
    "basscss-colors": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "whatwg-fetch": "^3.0.0"
  
...

【问题讨论】：

您在 css 文件中缺少 simi 冒号。

【参考方案1】：

改变

@import "basscss"
@import "basscss-colors"
@import "basscss-background-colors"

进入

@import "basscss";
@import "basscss-colors";
@import "basscss-background-colors";

css 要求每条规则都以; 结尾，但它是最后一行的可选内容

【讨论】：

我不敢相信我错过了他们。非常感谢！