'class not found' when file is @imported from node_modules folder?

[7ammer]

Hello I'm getting an error where the extend module can't find a class contained within an imported file located in the 'node_modules' directory.

Error message

error  in ./resources/assets/pcss/app.pcss

Module build failed: ModuleBuildError: Module build failed: 
  @extend .relative; // fails
         ^
      ".footer" failed to @extend ".relative".
The selector ".relative" was not found.

app.pcss file

@import '../../../node_modules/basscss-position/index.css'; /* contains .relative */
/* @import 'basscss-position/index.css';  this also fails */
@import "./test.pcss"; /* contains .bg-primary */

.footer {
  @extend .bg-primary; /* works */
  @extend .relative; /* fails */
}

webpack.mix.js

let mix = require('laravel-mix'); // aka webpack wrapper that makes things simple
let convertLength = require('convert-css-length');
let convert = convertLength('13px');

mix.sass('resources/assets/pcss/app.pcss', 'public/css')
	.options({
		postCss: [
			require('postcss-import')(),
			require('postcss-cssnext')({ browsers: ['last 2 versions', 'ie >= 9']}),
			require('postcss-extend')()
		]
	})

Add to script object in package.json

script: {
  "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --
progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

[7ammer]

Could I help by providing more detail?

[7ammer]

Just changed the extension of the file being imported in from .css to .pcss and everything started working? This doesn't make sense to me as by the time 'postcss-extend' has run, every import should have already been processed. 'postcss-import' is above 'postcss-extend'.

[7ammer]

Any hints? :L

[ColCh]

OMG @7ammer you saved my day.

to get this working, *.css should be changed to *.pcss