标签: postcss

这是我的第一个 Tailwind CSS 项目，从 CDN 开始，但我并不总是有互联网，所以我尝试使用 PostCSS 安装它，并且我使用 Vite 作为我的服务器。

关注了 CodeWithHarry 的这段视频https://www.youtube.com/watch?v=aUunolbb1xU&list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O&index=3

我首先启动了该项目

npm init -y

并安装了所需的软件包

npm install -D tailwind postcss autoprefixer vite

然后通过以下方式启动 Tailwind CSS

npx tailwindcss init -p

我还在 input.css 文件中输入了 @tailwind 指令。

但是当我跑的时候：

npm start

我的 vite 服务器向我打招呼时出现以下错误：

npm init -y

我的index.html：

npm install -D tailwind postcss autoprefixer vite

我的 tailwind.config.js：

npx tailwindcss init -p

我的 postcss.config.js：

npm start

我的package.json：

[plugin:vite:css] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
 - C:\projects\2 Shidhu\twproject\noop.js …

这是我到目前为止尝试过的：

\n

1. 通过安装npm install postcss-nesting --save-dev

   \n
\n

2. 设置 vite.config.js：

   \n
\n

import { fileURLToPath, URL } from 'url';\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport postcssNesting from 'postcss-nesting';\n\nexport default defineConfig({\n    plugins: [\n        vue(),\n        postcssNesting\n    ],\n  \n    resolve: {\n        alias: {\n            '@': fileURLToPath(new URL('./src', import.meta.url))\n        }\n    }\n});\n

但它\xe2\x80\x99s 不起作用。设置 PostCSS 以便我可以使用 CSS 嵌套的正确方法是什么\xe2\x80\x99？

Tailwindcss 有明确的文档说明如何为所有 tailwind 类生成前缀，以更好地将特定应用程序的样式与其上下文隔离。但是，我似乎无法找到关于如何将现有代码转换为使用前缀的直接答案。文档（https://tailwindcss.com/docs/configuration）展示了如何生成“tw-”类，但没有展示如何修改现有代码库以将此“tw-”前缀添加到代码本身。我有很多这样的类，手动检查并向现有类添加“tw-”前缀是不可行的。我错过了什么吗？如何转换现有代码库以使用生成的类前缀，而无需自己手动编辑所有 Tailwind 类？

在Sass中,我可以在一个单独的文件中定义我的变量_variables.scss,然后在任何地方使这些变量可用@import variables;.(实际上变量在首次导入后是全局可用的.)使用PostCSS,我可以使用postcss-simple-vars或postcss-css-variables定义单个文件的局部变量.我想在一个文件中定义所有/大多数变量,然后@import在我需要使用它们的任何地方定义该文件.

我知道PostCSS插件可以为插件配置预定义的变量,但是我不能为给定的背景计算对比色.

编辑:我可能不清楚我的问题是什么.有没有办法在CSS文件中定义PostCSS变量,使变量不是全局的,但可以"导入"到另一个CSS文件中？如上所述,我可以使用Sass,但是所有变量都是有效的全局变量(不理想).否则在PostCSS中我可以在每个样式表中定义我需要它们的变量(重点是什么？),或者我可以在静态JavaScript结构中定义它们(静态,因为它们不能引用其他变量).

我刚刚升级到 Gulp v4，想知道为什么我的 gulpfile 不再工作了。
我尝试了新文档的新代码，但没有按计划运行，因为我使用的是“纯”postcss。
所以我用谷歌搜索我的问题并发现了这个问题：Gulp 错误：监视任务必须是一个函数
但是，这也不是我的问题的解决方案，尽管我收到了相同的错误消息Error: watching src/styles/**/*.scss: watch task has to be a function

我目前有这个代码

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

gulp.task('default', function () {
    gulp.watch('src/styles/**/*.scss', ['styles']);
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});

当我更改 它时
gulp.watch('src/styles/**/*.scss', ['styles']);
，
gulp.watch('src/styles/**/*.scss', gulp.series('styles')); …

我目前正在使用Rollup和PostCSS。如何定位我想要处理的特定 scss 文件，而不必使用 @import 'source/scss/main.scss' in mysource/js/entry.js`

例如做类似的事情......

// rollup.config.js
...
postcss({
        from: 'source/scss/main.scss'
        minimize: true,
        sourceMap: true, 
        extract : 'build/css/main.css'
    }),
...

而不是在 source/js/entry.js

//source/js/entry.js
import  '../scss/main.scss'; // don't want to import SCSS from within JS file

import { someJSmodule } from './someJSmodule.js';
import { anotherJSmodule } from './anotherJSmodule.js';

这是我的当前 rollup.config.js

// rollup.config.js
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import copy from 'rollup-plugin-copy';
import postcss from 'rollup-plugin-postcss';


export …

在 svelte 中使用postcss和插件postcss-nesting非常简单——添加postcss-nesting到svelte.config.jspreprocess中的配置是唯一需要的：

import preprocess from "svelte-preprocess";
import postcssNesting from "postcss-nesting";

const config = {
    preprocess: preprocess({
        postcss: {
            plugins: [
                postcssNesting()
            ]
        }
    }),
    // ...
};

export default config;

<div class="example">
    One <span class="nested">two</span> three
</div>

<style lang="postcss">
    .example {
        color: red;
        & .nested {
            text-decoration: underline;
        }
    }
</style>