标签: postcss

如何抑制Webpack加载后CSS文件生成的警告？

警告示例：

WARNING in ./~/css-loader!./~/postcss-loader!./src/components/Navigator/Navigator.css
postcss-custom-properties: C:\StackData\bd\src\components\Navigator\Navigator.css:33:9: variable '--active' is undefined and
 used without a fallback

我的webpack配置：

 module: {
    loaders: [
   ...
      {test: /\.css/, loader: 'style-loader!css-loader!postcss-loader'},
   ...
    ]
  },
  postcss: function () {
    return [precss, autoprefixer];
  }

错误来自postcss插件,我想我可能写错了.

我想补充cssnano和autoprefixer到postcss插件.

gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143
        throw new Error(i + ' is not a PostCSS plugin');
        ^

Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15)
    at new Processor (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:51:25)
    at postcss (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:73:10)
    at Transform.stream._transform (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/index.js:47:5)
    at Transform._read (_stream_transform.js:167:10)
    at Transform._write (_stream_transform.js:155:12)
    at doWrite (_stream_writable.js:300:12)
    at writeOrBuffer (_stream_writable.js:286:5)
    at Transform.Writable.write (_stream_writable.js:214:11)
    at DestroyableTransform.ondata (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
Mac-a45e60e72dad:gulp JoeKonst$ 

我的代码:

// Dependancies
var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    plumber = require('gulp-plumber'),
    autoprefixer = require('gulp-autoprefixer'),
    uglify …

升级到最新版本的webpack后,我看到了这个错误:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'postcss'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated …

我试图让react-toolbox运行.得到错误'找不到模块precss',但它与我从网站上获取的代码相同.我错过了什么吗？

postcss.config.js

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer')
    ]
}

webpack.config.js

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/app/index.html',    
    filename: 'index.html',
    inject: 'body'
});

module.exports = {

    entry: __dirname + '/app/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders=1',
                    'postcss-loader'
                ]
            }

        ]
    },
    output: {
        filename: 'transformed.js',
        path: __dirname+'/build'
    },
    plugins: [HTMLWebpackPluginConfig]
};

有什么想法吗？

我postcss-import用来处理我的进口，并cssnano缩小。在我的 Webpack 配置中，我一直在使用以下设置css-loader...

{
  loader: 'css-loader',
  options: {
    url: false,
    import: false,
    minimize: false,
    importLoaders: 1,
    souceMap: true,
  }
}

...但是当我删除所有内容时似乎仍然可以正常加载，所以现在我post-css之前只有style-loader. 我可以安全地css-loader从我的 css 构建中省略，还是它提供了一些其他必要的功能？我还没有看到一个webpack.config.js不使用的文件css-loader，所以我想在这里保持谨慎！:)

我想在我的输出 CSS 文件和从我的 React 组件渲染的 JSX 中缩小我的类名（用于非常小的源保护目的）类似于这个 Webpack 插件：https : //github.com/vreshch/optimize-css -classnames-plugin

我可以使用任何现有的选项来实现这一点，无论是 Webpack 还是其他方式？非常感谢。

从：

<div className="long-class-name"></div>

.long-class-name {
 }

到：

<div class="a"></div>
.a {
}

我使用一个单独的postcss.config.js文件将PostCSS集成到Webpack中。

我想cssnano在进行生产构建时启用，而对开发构建禁用它。我怎样才能做到这一点？

这是我的webpack.config.js

const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

const path = require('path');

module.exports = (env, argv) =>
{
    //const isProduction = (process.env.WEBPACK_MODE === 'production')
    const isProduction = argv.mode === 'production' || process.env.NODE_ENV === 'production';

    const config = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].[contenthash].js',
            chunkFilename: '[name].[contenthash].js'
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        // fallback to …

我正在尝试为我的个人项目设置一个顺风 css。这是一个反应 SSR 应用程序。我在 webpack 配置下的 postcss 设置有问题。它会在每个 *.css 文件（甚至是空文件）上抛出相同的错误。

好像无法解析配置文件或默认选项？尝试了不同的配置，但没有效果。最初，我认为这可能与我的 css 文件有关，但是如果我删除 postcss 插件，它们都有效并且可以编译

网络包配置

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const paths = require('./paths');

module.exports = {
  entry: {
    index: path.resolve(paths.projectSrc, 'index.js'),
  },
  resolve: {
    alias: {
      '@src': paths.projectSrc,
    },
  },
module: {
  rules: [
  {
    test: /.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
    },
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader', …

我按照这个安装步骤在 create-react-app 中配置了 tailwindcss。它有效，但在添加 tailwindcss/jit 后，应用程序无法正常工作。我认为这是因为 create-react-app 不支持 PostCSS 8，但似乎 tailwindcss/jit 需要 PostCSS 8。

任何的想法？

我正在尝试将我的代码上传到服务器上，但由于存在中等漏洞，它不允许我这样做。我已经将我的问题缩小到从安装 react 应用程序下载的旧版本 postcss，特别是 react-scripts。我试过卸载 postcssreact-scripts然后postcss先安装，但是每当我进行安装时，它都会在其对node-modules文件夹的依赖项中安装一个错误的版本。

记录一些错误，以防我的问题没有 postcss

 Moderate        Regular Expression Denial of Service                          
  Package         postcss                                                       
  Patched in      >=8.2.10                                                      
  Dependency of   react-scripts                                                 
  Path            react-scripts > postcss-preset-env > postcss-place > postcss  
  More info       https://npmjs.com/advisories/1693                             

  Moderate        Regular Expression Denial of Service                          
  Package         postcss                                                       
  Patched in      >=8.2.10                                                      
  Dependency of   react-scripts                                                 
  Path            react-scripts > postcss-preset-env >                          
                  postcss-pseudo-class-any-link > postcss                       
  More info       https://npmjs.com/advisories/1693                             

  Moderate        Regular Expression Denial of Service                          
  Package         postcss                                                       
  Patched in      >=8.2.10                                                      
  Dependency of   react-scripts                                                 
  Path            react-scripts …