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

Question

这是我对 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 的新手，所以我真的不知道它是如何工作的，也不知道如何正确配置它。

Answer 1

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

...
{
    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，它有完整的配置PostCSS 在 Webpack 上，同样在此 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()功能，效果很好。

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

How do I get postcss-loader, postcss-cssnext and sass-loader to work together in webpack?

webpack

postcss

sass-loader

cssnext

postcss-loader