Postcss-扩大。 从node_modules文件夹@import文件时“找不到类”？

Question

您好，我遇到了一个错误，即扩展模块找不到位于'node_modules'目录中的导入文件中包含的类。

错误信息

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文件

@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')()
        ]
    })

添加到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"
}

我已经注意到，如果我将node_module文件从.css更改为.pcss，那么它将起作用，但是我不确定为什么，而且我真的不想这样做。

Answer 1

我过去也遇到过类似的问题，问题是这不是postcss-extend的错误，您应该在postcss-import中报告此错误，或者直接用postcss-simple-import替换postcss-import依赖关系即可。更好并且由开发人员适当地管理。