CSSNext postcss-custom-media - 无法使用“importFrom”选项从文件中导入媒体答案

【问题标题】：CSSNext postcss-custom-media - unable to import medias from file with 'importFrom' optionCSSNext postcss-custom-media - 无法使用“importFrom”选项从文件中导入媒体
【发布时间】：2019-12-23 17:17:56
【问题描述】：

我正在尝试将 customMedia option 添加到我的 postcss-cssnext features 配置和 importFrom 文件位置，但这不起作用，我在项目构建时没有任何错误，只有最终的 Missing @custom-media definition for '--small-viewport'. The entire rule has been removed from the output.当我尝试使用媒体时。我该如何调试？

module.exports = {
    plugins: [
        require('postcss-import')(),
        require('postcss-nested')(),
        require('postcss-simple-vars')({
            variables: {
                ...require('./src/ui/variables')
            }
        }),
        require('postcss-cssnext')({
            features: {
                customProperties: false,
                browsers: ['> 0.5%, last 2 versions, Firefox ESR, not dead'],
                customMedia: {
                    importFrom: require('path').join(__dirname, './src/ui/custom-media.css')
                }
            },
        }),
        require('cssnano')({
            autoprefixer: false,
            zindex: false,
            reduceIdents: false,
            discardComments: { removeAll: true },
            discardUnused: { fontFace: false },
            colormin: false,
        }),
    ]
};

【问题讨论】：

标签： postcss cssnext

【解决方案1】：

好的，根据postcss-custom-media CHANGELOG importFrom 仅在 7.0.0 中添加，而我的 cssnext 使用 6.0.0。由于不推荐使用 CSSNext，我将切换到 postcss-preset-env

【讨论】：

【解决方案2】：

您知道如何在 postcss-preset-env 中使用自定义媒体，只有当您在组件中创建自定义媒体并在我想从 index.css 或 vars.css 获取自定义媒体时引用它时，它们才对我有用他们不工作，有变量一切都很好

【讨论】：

你应该发布另一个问题 - 我无法在此处提供代码
配置const customMediaUnprefixed = require('./src/hooks/useMedia/custom-media.js'); const customMediaCache = { customMedia: Object.assign( {}, ...Object.keys(customMediaUnprefixed).map((key) => ({[`--${key}`]: customMediaUnprefixed[key]})) ), }; const config = { plugins: [ require('postcss-preset-env')({ stage: 0, customProperties: false, browsers: ['> 0.5%, last 2 versions, Firefox ESR, not dead'], importFrom: [customMediaCache], features: { 'color-mod-function': {unresolved: 'warn'}, }, }), ], }; module.exports = config;
custom-media.js module.exports = { sm: '(max-width: 719px)', md: '(min-width: 720px)', lg: '(min-width: 1280px)', xl: '(min-width: 1920px)', mdHeight: '(min-height: 550px)', lgHeight: '(min-height: 768px)', };