首页 文章

在webpack中从cssnext转换为postcss-cssnext

提问于
浏览 次
0

我无法将我的webpack配置转换为使用现已弃用的cssnext和cssnext-loader到postcss-cssnext和postcss-loader . Doc的状态清楚地说明我正在尝试重新创建的功能已被委托给功能特定的插件，但我似乎无法让事情发生 . 一个例子是css变量 .

My current working webpack config is like so:

...插件导入

var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var customMedia = require("postcss-custom-media");

... loader config

module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader!cssnext-loader",
        include: path.join(__dirname, 'src')
    }]
},

... postcss配置

postcss: function() {
    return [customMedia(), cssnext(), autoprefixer()];
}

The problem:

我将我的cssnext导入换成了指向新的postcss-cssnext模块，并添加到现在需要的模块中以处理我的css变量（postcss-custom-properties） . 我也删除了cssnext-loader并假设postcss-loader可以处理事情???

...插件导入

var cssnext = require('postcss-cssnext');
var autoprefixer = require('autoprefixer');
var customMedia = require("postcss-custom-media");
var customProperties = require('postcss-custom-properties');

... loader config

module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: path.join(__dirname, 'src')
    }]
},

... postcss配置

postcss: function() {
    return [customMedia(), cssnext(), customProperties(), autoprefixer()];
}

我可以看到我的所有样式都被渲染到页面，但没有评估任何css变量 . 中心问题似乎与“cssnext-loader”的使用有关 . 如果我重新添加它，变量就可以了 . 我确实玩过postcss-import和各种配置迭代但似乎没什么用 . 我有什么想法我做错了吗？如何让postcss-cssnext，postcss-loader，css变量和webpack协同工作？

webpack postcss cssnext

2 回答

  • 1

    首先，cssnext和postcss-cssnext已经包含postcss-custom-media，postcss-custom-properties和autoprefixer，如文档的homepage和feature page所述，因此您不需要包含所有这些内容 .

    如果你想要与cssnext之前完全相同的功能（我假设你使用的是cssnext-loader），并且你正在使用 @import 语句（这是cssnext中包含的转换），你可以安全地 grab postcss-loader cssnext到postcss-cssnext迁移指南的示例 .

    回复于
  • 3

    至于我试图转换的三个主要功能，我已经找到了神奇的公式 . 我擦除了我的node_modules目录 . 从package.json中删除了旧的cssnext和插件 . 添加了postcss，postcss-loader，postcss-cssnext和postcss-import到package.json并重新安装了一切 . 我认为我从一开始就有正确的配置，但由于我使用了npm uninstall，我的node_modules目录处于错误状态 .

    我使用了以下loader配置：

    {
   test: /\.css$/,
   loader: "style-loader!css-loader!postcss-loader",
   include: path.join(__dirname, 'src')
}

    并使用以下postcss配置：

    postcss: function () {
    return [
        require("postcss-import")({ addDependencyTo: webpack }),
        require('postcss-cssnext')
    ];
}

    我现在有自动修复，自定义媒体和变量 . 但是，它现在只有一个样式标签 . 因此，在文件系统中定位特定的css块是一件痛苦的事 .

    回复于

相关问题