webpack2 | postcss生成警告

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 I类定义3个嵌套类（&.style_primary&.style_secondary和&.style_tertiary）。我发现如果其中2个评论一切正常。它看起来像是如果我从一个文件中使用多个占位符选择器，它会引发警告......

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

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

使用的包：

• 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'), 
    ] 
}; 

作品！