Question

我有postcss.config.js个文件：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  parser: 'postcss-scss',
    plugins: [
      require('postcss-smart-import')({
        addDependencyTo: webpack,
        path: [
          path.resolve(__dirname, 'src/common'),
          path.resolve(__dirname, 'src/common/styles'),
          path.resolve(__dirname, 'src/app1'),
          path.resolve(__dirname, 'src/app2'),
        ]
      }),
      require('precss'),
      require('autoprefixer'),
    ]
}

webpack.conf.js中的

我的定义很简单：

{
    test: /\.(scss|sass|css)$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]',
      'postcss-loader'
    ]
}

在构建过程中，我收到警告：

WARNING in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!./~/postcss-loader/lib!./src/common/shared/ui/Button.scss

(Emitted value instead of an instance of Error) postcss-extend: /Users/kania/projects/app-frontend/src/common/shared/ui/Button.scss:22:5: @extend is being used in an anti-pattern (extending things not yet defined). This is your first and final warning

@ ./src/common/shared/ui/Button.scss 4:14-210 13:2-17:4 14:20-216 @ ./src/common/shared/ui/Button.tsx @ ./src/common/shared/ui/index.ts (...)

在Button.scss我有一个非常简单的定义：

@import 'shared/styles/buttons';
@import 'shared/styles/fonts';

.buttonContainer {
  display: flex;
}

.button {
  @extend %smallFont;
  padding: 0 2.5rem;
  flex: 1;

  &.style_primary {
    @extend %buttonPrimary;
  }

  &.style_secondary {
    @extend %buttonSecondary;
  }

  &.style_tertiary {
    @extend %buttonTertiary;
  }
}

在.button内部我定义了3个嵌套类（&.style_primary &.style_secondary和&.style_tertiary）。我发现其中有两个被评论一切正常。看起来如果我从一个文件中使用多个占位符选择器，它会抛出警告......

占位符在导入的文件中定义，文件存在于定义的位置。

我很感激任何提示，如何解决这个问题。

二手包：

postcss-loader@^2.0.5
postcss-extend@^1.0.5
postcss-smart-import@^0.7.4
precss@^1.4.0 autoprefixer@^7.1.1
webpack@^2.5.1
webpack-dev-server@^2.4.5

我使用此命令来运行构建： webpack-dev-server --hot --progress --config webpack.dev.config.js

Answer 1

花了几个小时的时间来寻找警告的原因并且没有为警告后的所有内容构建样式，我终于找到了原因。

获胜者是：

precss@^1.4.0

这是旧包装，最近的更改是在2年前添加的。它甚至不是一个软件包，只是收集了postcss的插件来处理样式。

我从项目中删除了这个包，并添加了一些必需的插件postcss.conf.js：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  parser: 'postcss-scss',
    plugins: [
      require('postcss-smart-import')({
        addDependencyTo: webpack,
        path: [
          path.resolve(__dirname, 'src/common'),
          path.resolve(__dirname, 'src/app1'),
          path.resolve(__dirname, 'src/app2'),
        ]
      }),
      require('postcss-advanced-variables'),
      require('postcss-mixins'),
      require('postcss-nested'),
      require('postcss-nesting'),
      require('postcss-extend'),
      require('autoprefixer'),
    ]
};

作品！

webpack2 | postcss构建警告

1 个答案: