如何让 postcss-loader、postcss-cssnext 和 sass-loader 在 webpack 中协同工作？

Posted 2023-02-22

【中文标题】如何让 postcss-loader、postcss-cssnext 和 sass-loader 在 webpack 中协同工作？

【英文标题】：How do I get postcss-loader, postcss-cssnext and sass-loader to work together in webpack?

【发布时间】：2018-10-28 18:33:59

【问题描述】：

这是我为scss/css 文件配置的Webpack。

...

    test: /\.s?css$/,
    use: [
      'style-loader',
       loader: 'css-loader', options:  importLoaders: 2  ,
      
        loader: 'postcss-loader',
        options: 
          ident: 'postcss',
          plugins: loader => [
            require('postcss-import')( root: loader.resourcePath ),
            require('cssnano')(),
            require('postcss-cssnext')(),
          ]
        
      ,
      'sass-loader',
    ]

...

问题是当我使用cssnext 之类的gray(100) 函数时，输出CSS 文件在放置函数的位置有一个空值。我想知道我在这里做错了什么。

即 background-color: gray(100); 输出到background-color: ;

我是 postcss 的新手，所以我还不知道它是如何工作的，也不知道如何正确配置它。

【参考方案1】：

对于您的确切问题，cssnext 函数，您必须将cssnano 放在postcss-cssnext 之后，如下所示：

...

    test: /\.s?css$/,
    use: [
      'style-loader',
       loader: 'css-loader', options:  importLoaders: 2  ,
      
        loader: 'postcss-loader',
        options: 
          ident: 'postcss',
          plugins: loader => [
            require('postcss-import')( root: loader.resourcePath ),
            require('postcss-cssnext')(),
            require('cssnano')(),
          ]
        
      ,
      'sass-loader',
    ]

...

但是我不知道，你为什么用sass-loader？当您的项目中有 postcss 时。

其实PostCSS可以做sass这样的所有工作更好，语法风格由你决定，我建议看THIS REPO，它在Webpack上有完整的PostCSS配置，也在这个repo，使用SCSS语法。

为了清楚起见，我在下面写了一部分配置：

rules: [
    
        test: /\.(js|jsx)$/,
        exclude: /(node_modules\/)/,
        use: [
            
                loader: 'babel-loader',
            
        ]
    ,
    
        test: /\.pcss$/,
        use: ExtractTextPlugin.extract(
            fallback: 'style-loader',
            use: [
                
                    loader: 'css-loader',
                    options: 
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[hash:base64:10]',
                        sourceMap: false,
                    
                ,
                
                    loader: 'postcss-loader',
                    options: 
                        config: 
                            path: `$__dirname/../postcss/postcss.config.js`,
                        
                    
                
            ]
        )
    
]

即使我使用*.pcss 而不是*.scss、*.sass 或*.css，也只是为了保持一致性，没有什么不同。

PostCSS 配置在单独的文件中，它是：

module.exports = 
    ident: 'postcss',
    syntax: 'postcss-scss',
    map: 
        'inline': true,
    ,
    plugins: 
        'postcss-partial-import': 
            'prefix': '_',
            'extension': '.pcss',
            'glob': false,
            'path': ['./../src/styles']
        ,
        'postcss-nested-ancestors': ,
        'postcss-apply': ,
        'postcss-custom-properties': ,
        'postcss-nested': ,
        'postcss-cssnext': 
            'features': 
                'nesting': false
            ,
            'warnForDuplicates': false
        ,
        'postcss-extend': ,
        'css-mqpacker': 
            'sort': true
        ,
        'autoprefixer': 
            'browsers': ['last 15 versions']
        ,
    
;

绝对cssnext 运行良好，我使用了color() 函数并且运行良好。