Postcss-扩大。文件是从node_modules文件夹中@imported时'找不到类'？

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 依赖关系，这种关系要好得多，并且由开发人员妥善管理。