@import not applied using PostCSS/CSSNext

Question

I am using React with Webpack 4. I am trying to import the BassCSS classes in my index.css:

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

However, it seems like the imports are not applied. Webpack does not throw any error messages or warnings.

For example, the BassCSS class red does not make my header text red:

import React from 'react'

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

export default Header

The index.css is imported in my index.js:

import './styles/index.css'

It will make my header text red if I comment out my imports and manually define the red class like so:

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

.red {
  color: red;
}

Using webpack, I have configured the style-loader, the css-loader and the postcss-loader for CSS files:

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

This is how my postcss.config.js looks like:

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

module.exports = {
  plugins: [
    postcssCssNext,
    postcssImport
  ]
}

And lastly, my dependencies from my 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"
  }
...

you are missing simi colons in the css file.

VeXii
– VeXii

2019-06-14 21:21:27 +00:00
Commented Jun 14, 2019 at 21:21 — VeXii
– VeXii, Commented Jun 14, 2019 at 21:21

VeXii · Accepted Answer · 2019-06-14 21:23:06Z

1

change

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

into

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

css requires each rule to end with ; but it's optional of the last line

answered Jun 14, 2019 at 21:23

VeXii

3,1091 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mitchkman Over a year ago

I can't believe I missed them. Thanks a ton!

Collectives™ on Stack Overflow

@import not applied using PostCSS/CSSNext

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related