标签: postcss

我试图使用变量来使用CSSnext插件指定断点.

目前我的css看起来像这样:

@media (width <= var(--screen-md-min)) {
    background-color: var(--brand-purple-dark);    
}

但是当我尝试运行它时,我在控制台中收到以下警告:

5: Missing @custom-media definition for '--screen-md-min'. The entire rule has been removed from the output.

如果我用实际像素替换var( - screan-md-min),此代码可以正常工作.我确信这只是语法问题,但CSSnext文档并没有非常清楚地使用变量.

我一直在使用gulp一段时间,并知道如何导入另一个节点模块,例如

var sass = require('gulp-sass');

这很好,但是我的gulpfile填满了我想要移动到一个单独的文件和"require"的代码.具体来说,我正在编写一个postcss插件,我已经在gulpfile中声明为函数时已经工作了.我的问题是如何将我的函数放在外部文件中,并像我做一个节点模块一样需要它.我是否需要在需要的文件中"导出"该功能？我是否需要使用ES6模块或类似的东西？

顺便说一句,我意识到,如果我这样做,我可能会(A)将其转换为适当的节点模块并将其放在私有NPM存储库中,但这似乎是不必要的,或者(B)将其转换为适当的gulp插件,但这需要学习如何编写gulp插件并学习流和东西.这两个都可能更好,但需要更多的时间,所以我决定暂时保持功能简单和本地.

我使用的是 PostCSS响应式插件，生成的代码如下：

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
}

http://codepen.io/umbriel/pen/WwLBxQ

在 Firefox、Chrome 和其他现代浏览器中运行良好。但是Version 9.0.3，正如我链接的 Codepen 所证明的那样，safari完全失败了。

有谁知道这是为什么？

编辑：我可能已经找到了罪魁祸首，似乎 vw 与 calc 结合是我尝试过的问题。有没有办法让它工作？

我正在使用Gulp并且已经使用了Gulp Autoprefixer独立版本，例如：

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
        //.................
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: [
              //..........
            ],
        }))
        //............
});

...但是随后我看到了Gulp Postcss插件，该插件似乎包装了非Gulp自动前缀的用法，例如：

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
    //.................
            .pipe(sass())
            .pipe(postcss([
                autoprefixer({
                    browsers: [
                        //.......
                    ],
                }),
            ]))
    //............
});

有什么不同？

我正在尝试使用 Webpack+PostCSS。这是 CSS 配置：

const cssRule = {
    test: /\.css$/,
    use: [
        'style-loader',
        {loader: 'css-loader'},
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    postcssImport({
                        paths: ['./assets']
                    }),
                    postcssPresetEnv({
                        stage: 0,
                        browsers: 'Firefox ESR',
                        importFrom: ['./assets/shared/colors.css']
                    }),
                    postcssEasingGradients()
                ]
            }
        }
    ]
}

assets/shared/colors.css 文件如下所示：

:root {
    --color-primary-0: #051845;
    --color-primary-1: #05112B;
    --color-primary-2: #041335;
    --color-primary-3: #092568;
    --color-primary-4: #0A328D;

    --color-primary-3-a20: #09256820;

    --color-secondary-1-0: #200446;
    --color-secondary-1-1: #16052C;
    --color-secondary-1-2: #190336;
    --color-secondary-1-3: #310769;
    --color-secondary-1-4: #42098F;

    --color-secondary-2-0: #004628;
    --color-secondary-2-1: #012C1A;
    --color-secondary-2-2: #00361F;
    --color-secondary-2-3: #006A3D;
    --color-secondary-2-4: #009153;

    --light-gray: #EEE;
    --dark-gray: …

我目前的工作 gulpfile.js：

    var postcss = require('gulp-postcss');
    var gulp = require('gulp');
    var cssnano = require('cssnano');

    gulp.task('css', function () {
        var plugins = [
            cssnano()
        ];
        return gulp.src('css/*.css')
            .pipe(postcss(plugins))
            .pipe(gulp.dest('css/min/'));
    });

Gulp 将所有的 CSS 传送到 PostCSS，后者通过 cssnano 运行它们，并且它们都在css/min 中。好的。

如何让 cssnano 使用高级转换？

理想情况下，使用变量或参数对象而不是外部配置脚本。我认为 anwser 可能在这个 cssnano guide page 上，但我不知道如何使它与 Gulp+PostCSS 一起工作。

我在使用 Symfony 设置 TailwindCSS 时遇到问题，我不确定出了什么问题

webpack.config.js

var Encore = require(\'@symfony/webpack-encore\');\n\nif (!Encore.isRuntimeEnvironmentConfigured()) {\n    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || \'dev\');\n}\n\nEncore\n    .setOutputPath(\'public/build/\')\n    .setPublicPath(\'/build\')\n    .addStyleEntry(\'tailwind\', \'./assets/css/tailwind.css\')\n    .enablePostCssLoader((options) => {\n         options.config = {\n          // directory where the postcss.config.js file is stored\n                 path: \'./postcss.config.js\'\n         };\n    })\n    .splitEntryChunks()\n\n    .enableSingleRuntimeChunk()\n    .cleanupOutputBeforeBuild()\n    .enableBuildNotifications()\n    .enableSourceMaps(!Encore.isProduction())\n    .enableVersioning(Encore.isProduction())\n\n    .configureBabelPresetEnv((config) => {\n        config.useBuiltIns = \'usage\';\n        config.corejs = 3;\n    })\n\n;\n\nmodule.exports = Encore.getWebpackConfig();\n

顺风.css

@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n

postcss.config.js

let tailwindcss = require(\'tailwindcss\');\n\nmodule.exports = {\n    plugins: [\n        tailwindcss(\'./tailwind.config.js\'), // your tailwind.js configuration …

我正在为我的学习项目使用包裹打包器并尝试为其创建构建。我也在使用 scss 文件。在bundle.scss我已经导入了我所有的 scss 文件。并导入bundle.scss到App.js.

所以在运行时parcel build index.html，我收到以下错误。

  /src/style/bundle.scss:undefined:undefined: plugin is not a function
    at LazyResult.run (/usr/local/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/usr/local/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:212:26)
    at /usr/local/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/usr/local/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/usr/local/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:131:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xxxxx complete: `parcel build index.html`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the xxxxx complete script.
npm ERR! This is probably not a problem with npm. …

我正在将 nextjs 与 tailwindcss 结合使用，并且在将 postcss-nesting 添加到我的 nextjs 应用程序中时遇到困难。

以下是相同的配置：

next.config.js

const withPlugins = require("next-compose-plugins");
module.exports = withPlugins([], {});

postcss.config.js

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    "tailwindcss/nesting",
    "postcss-nested",
  ],
};

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./src/components/**/*.{js,ts,jsx,tsx}",
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
};

在我的自定义 css 文件中，我尝试像这样使用它

.toolbar_navigation_items {
  li {
    @apply text-3xl;
  }
}

然后我收到错误

"(2:3) Nested CSS was detected, but CSS nesting has …

我从 Vue2 迁移到 vue3，从 cli 迁移到 vite（使用 Vuetify），然后收到此错误。

[plugin:vite:css] 无法加载 PostCSS 配置 (searchPath: ...): [Error] 加载 PostCSS 插件失败: ES 模块 C:\Users...\src\vue\node_modules\vuetify\ 的 require()不支持 lib\framework.mjs。相反，将 C:\Users...\src\vue\node_modules\vuetify\lib\framework.mjs 的 require 更改为所有 CommonJS 模块中都可用的动态 import() 。

router.js:1
无法加载资源：服务器响应状态为 500（内部服务器错误） App.vue:1
无法加载资源：服务器响应状态为 500（内部服务器错误） main.css： 1
无法加载资源：服务器响应状态为 500（内部服务器错误）

我尝试删除模块并重新安装它，还尝试添加 postcss.config.js 文件，但对我没有任何作用

包.json

  "versionMessage": "",
  "private": true,
  "scripts": {
    "serve-dev": "vue-cli-service serve --mode development",
    "build-dev": "vue-cli-service build --mode development",
    "build-prod": "vue-cli-service build --mode production",
    "prep-deploy": "node prep_deployment.js",
    "lite": "lite-server",
    "dev": "vite",
    "build": "vite build",
    "test": "vite test", …