标签: postcss

我安装autoprefixer并收到此警告：

npm install autoprefixer@10.4.5 --save-exact

WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css
(./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

webpack compiled with 1 warning

每当我运行 npm start 时，我都会收到此错误。我尝试了几个修复程序，但没有一个对我有用。我尝试将 autoprefixer 的版本更改为 9.8.6，但是没有用。请帮我解决这个问题

这是我的 package.json

{
  "name": "reactgallery",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ], …

我正在尝试在我的 nuxt 项目中安装 Tailwindcss

我使用 nuxt https://v3.nuxtjs.org/getting-started/installation的全新安装

npx nuxi init nuxt3-app

并按照 tailwindcss 安装

https://tailwindcss.com/docs/guides/nuxtjs

但是当我启动应用程序时npm run dev我收到此错误

ERROR  Cannot restart nuxt:  postcss@8 is not compatible with current version of nuxt (0.0.0). Expected: >=2.15.3   

我不知道如何解决它，并且在网上找不到任何答案，我感谢您的帮助，谢谢

我正在尝试根据教程学习​​reactjs.同时本教程指示使用webpack编译样式表和JS资源.我遇到了一个错误,其中样式表无法编译并在使用webpack编译文件时抛出跟随错误.它显示以下错误:

   ERROR in ./src/stylesheets/hello.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/stylesheets/hello.css)
Module build failed: Error: No PostCSS Config found in: E:\developer\start\src\stylesheets
    at E:\developer\start\node_modules\postcss-load-config\index.js:51:26
    at <anonymous>
 @ ./src/stylesheets/hello.css 2:14-124
 @ ./src/lib.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js

我已根据教程完成了所有工作,但不知怎的,这个错误仍然存​​在,无法解决这个问题,因为我对此非常陌生.我的webpack配置文件webpack.config.js如下:

    module: {
        rules: [
           {
                test: /\.css$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "postcss-loader" // compiles Sass to CSS
                }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes …

postcss.config.js用于展示如何配置的变体数量非常令人困惑。有一些tailwindcss使用此功能的示例（例如文档中的示例）：

// Example 1:
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

然后是那些需要库的：

// Example 2:
module.exports = {
  plugins: {
    require('tailwindcss'),
    require('postcss-preset-env')({
      stage: 0,
      'nesting-rules': true
    })
  },
}

其他人在配置之前需要外部库module.exports：

// Example 3:

const tailwindcss = require('tailwindcss');
const postcssPresetEnv = require('postcss-preset-env');


module.exports = {
  plugins: {
    tailwindcss,
    postcssPresetEnv
  },
}

当必须合并未根据默认值命名的配置文件时，还有更多必要的内容。

yarn dev今天，当使用 postcss.config.js运行时，我收到此错误，如示例 2 所示：

Syntax Error: /[path]/_pod-test/postcss.config.js:3
    require('tailwindcss'),
             ^^^^^^^^^^^

SyntaxError: Unexpected string

当我删除带有“tailwindcss”的行时，“postcss-preset-env”也会发生同样的情况：

Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
    require('postcss-preset-env')({ …

这是我第一次尝试设置Webpack,所以我确定我在这里遗漏了一些东西.

我试图用Webpack加载我的PostCSS文件,使用ExtractTextPlugin生成一个css文件到"dist".问题是Webpack似乎没有拿起css文件.它们属于"客户/风格",但我尝试将它们移动到"共享",结果相同.

我使用--display-modules选项运行Webpack,并验证没有显示css文件.

我尝试在没有提取文本插件的情况下运行它,结果是一样的:没有CSS内置到bundle.js中.

这是我的prod配置:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  entry: [
    './client'
  ],
  resolve: {
    modulesDirectories: ['node_modules', 'shared'],
    extensions: ['', '.js', '.jsx', '.css']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '/'
  },
  module: {
    loaders: [
      {
        test:    /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['babel']
      },

      {
        test: /\.css?$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader!postcss-loader'
        ),
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ],
  postcss: (webpack) => [
    require('postcss-import')({ addDependencyTo: webpack, …

我一直在尝试使用LESS和Autoprefixer配置webpack,但autoprefixer似乎不起作用.我的css或更少的文件不是自动反射的.示例: display: flex停留display: flex

我把我的webpack配置放在下面:

var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    bundle: "./index.jsx"
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader']
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      }

    ],
    postcss: function () {
      return [autoprefixer];
    }
  },
  plugins: [
    new webpack.BannerPlugin(banner),
    new ExtractTextPlugin("style.css")
  ],
  devtool: 'source-map',
  devServer: {
    stats: 'warnings-only',
  }
};

我正在对 typescript 和 tailwindcss 做出反应。

我想要的是，不是在主tailwind.css文件（包含 @tailwind base、@tailwind 组件等的文件）中使用@apply指令，我想在任何 .scss 文件中使用它。

例如，每当我创建一个组件时，我都会创建一个文件夹，并在其中创建一个 index.tsx 文件和一个 .scss 文件。我想在该 .scss 文件中使用 @apply 指令。这样，工作和调试将很容易，因为两个关联的文件都在同一个文件夹中。我怎样才能做到这一点？

我在下面展示了我的基本文件夹结构。

文件夹结构：

src > 组件 > 标题 > Header.tsx

import React from "react";
import styles from "./Header.module.scss";

interface Props {}

const Header: React.FC<Props> = (props) => {
  return <div className={styles.headerTag}>Header part here</div>;
};

export default Header;

src > 组件 > Header > Header.module.scss

// what to import so that I can use tailwind like …

我正在使用一个(现在较旧的)版本的react-boilerplate,它带有CSS模块.它们的优点在于您可以创建变量并将其导入其他CSS文件中.

这是我的colors.css文件

:root {
  /* Status colors */
  --error: #842A2B;
  --success: #657C59;
  --pending: #666;
  --warning: #7E6939;
}

当我导入该文件时,我只需要在我的.css文件的顶部使用:

@import 'components/App/colors.css';

我希望我的网站有两个主题的选项,我希望能够使用Javascript动态更新这些变量.最好的方法是什么？

编辑:我希望有一种方法来更新colors.css文件,而不必在从两个可能的css文件中提取的所有组件中进行条件导入...让我知道是否有办法做到这一点,如果有,我会改变接受的答案.谢谢所有回答的人!

我的第一个问题是关于如何为简单项目推荐这个开关,只是为了预处理/ Concat/Minify？

理解这个未来的"标准",比如Webpack和PostCss-NextCss-Autoprefixer等,就像是在迷恋我....

所以这导致了我的下一个问题,是否有任何教程可以指导我在第一个问题中讲述的简单任务？

或者是一个简单的方法来改变我gulpfile.js的webpack-config.js

我在gulp中的正常任务不是最佳实践,但运作良好:

//load plugins
var gulp    = require('gulp'),
runSequence = require('run-sequence'),
sass        = require('gulp-ruby-sass'),
compass     = require('gulp-compass'),
rev         = require('gulp-rev'),
revDel      = require('rev-del'),
del         = require('del'),
minifycss   = require('gulp-minify-css'),
uglify      = require('gulp-uglify'),
rename      = require('gulp-rename'),
concat      = require('gulp-concat'),
notify      = require('gulp-notify'),
plumber     = require('gulp-plumber'),
watch       = require('gulp-watch'),
path        = require('path');


  //the title and icon that will be used for the Grunt notifications
  var notifyInfo = {
    title: 'Gulp',
    icon: path.join(__dirname, 'gulp.png')
  };

  //error …