标签: postcss

如何postcss在本地安装模块，并通过postcss-cli全局安装来使用它们？

例如：

postcss -u autoprefixer -o style.css index.css

如果我在全球范围内安装postcss-cli并autoprefixer安装了此命令，或者两者都在本地安装，则此命令有效。但它不起作用，如果我在postcss-cli全球和autoprefixer本地都安装了。

这个问题不是针对 autoprefixer 的，因为 autoprefixer 将是一个模块，我无论如何都会在全局安装什么。任何意见将是有益的。

如果postcss-cli全局和autoprefixer本地安装，这是我得到的错误：

> postcss -u autoprefixer -o style.css index.css -w

module.js:327
    throw err;
    ^

Error: Cannot find module 'autoprefixer'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at /home/user/.nvm/versions/node/v4.4.2/lib/node_modules/postcss-cli/index.js:104:14
    at Array.map (native)
    at Object.<anonymous> (/home/user/.nvm/versions/node/v4.4.2/lib/node_modules/postcss-cli/index.js:97:24)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)

npm ERR! Linux …

所以用更少的我可以&做一个组合。

例如：

.baa {
  &.foo {
    opacity: 1;
  }
}

这将生成规则 .baa.foo

我们需要什么插件和语法让 postcss 做同样的事情？

在依赖升级地狱.想知道我是否能得到任何人的小费.

除了一件事,能够把所有东西都搞砸了.我正在项目中使用带有PostCSS的CSS模块.我正在升级到Webpack 2并借此机会升级所有其他软件包.

我遇到的问题是其中一个CSS处理器.基本上任何包含从另一个文件加载类的composes属性的CSS文件都会失败.

这就是Webpack CSS加载器的样子:

test: /\.css/,
exclude: /node_modules/,
use: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            modules: true,
            localIdentName: '[folder]__[local]___[hash:base64:5]',
            importLoaders: 1
        }
    },
    'postcss-loader'
]

当我尝试加载使用样式表与其中一个组合的页面时,我在浏览器错误控制台中看到此错误:

Dynamic page loading failed TypeError: Cannot read property 'removeChild' of null
    at removeStyleElement (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:122:25)
    at remove (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:168:4)
    at Array.updateStyle (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:180:4)
    at addStylesToDom (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:69:22)
    at module.exports (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:37:2)
    at eval (eval at ./app/components/EntryGroup/styles.css …

在 gruntfile 中

stylelint: {
    all: ['app/styles/**/*.scss']
},

.stylelintrc

{
    "plugins": [
        "stylelint-selector-bem-pattern"
    ],
    "rules": {
      "plugin/selector-bem-pattern": {
      "componentName": "[A-Z]+",
      "componentSelectors": {
        "initial": "^\\.{componentName}(?:-[a-z]+)?$",
        "combined": "^\\.combined-{componentName}-[a-z]+$"
      },
      "utilitySelectors": "^\\.util-[a-z]+$"
    }
    }
}

/Users/jitendravyas/app-test/styles/components/_campaign-settings-integrations.scss

/* @define campaign-settings */

.campaign-settings__integrations {
  @include flex;
}

.campaign-settings__integration {
  border: 1px solid $color-green;
  border-radius: 3px;
  color: $color-green;
  margin-right: $base-spacing-unit;
  @include flex;

  .check {
    background: $color-green;
    color: white;
    @include vertical-center;
  }

  > div {
    padding: $half-spacing-unit;
  }
}

运行 stylelint 时没有出现任何错误。Stylelint 正在处理其他规则。

我正在使用@ angular/cli @ 1.4.3.

在构建之前,我正在使用gulp-postcss来自动修复我的CSS.它是一种享受.以下是它创建的CSS示例(为了便于阅读而未缩小):

form.registration-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

完善!但是当CLI构建应用程序时,创建的CSS看起来像这样:

form.registration-form {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}

注意它的HALF是如何丢失的!？:/

我很困惑,任何帮助,我将永远感激不尽!

干杯!

我是webpack的新手,我正在尝试将所有内容设置为反应项目.我已经设法让所有的东西都按照预期在webpack中工作,但是已经遇到了使用autoprefixer的路障.

我已经关注了post css和autoprefixer的文档,我显然在这里缺少一些重要的东西,或者做了一些愚蠢的事情.请你看一下我的配置,如果你有任何建议,请告诉我.

其他postcss插件工作得很好,像nanocss.虽然我已经尝试了cssn​​ext,因为我认为包括autoprefixer无论如何.

我假设它是autoprefixer配置问题.

如果您键入npx autoprefixer info,则在命令行中还有另一件事.一切都很好.我构建或运行开发服务器时没有错误它只是不自动修复任何东西.

这是我的所有配置文件.提前致谢.

.browserlistrc

# Browsers that we support

> 1%
Last 2 versions
IE 8 # sorry

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Constant with our paths
const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  SRC: path.resolve(__dirname, 'src'),
  JS: path.resolve(__dirname, 'src/js'),
};

// Webpack configuration
module.exports = {
  entry: path.join(paths.JS, 'app.jsx'),
  output: {
    path: paths.DIST,
    filename: 'app.bundle.js',
  },
  // Tell webpack to use html plugin and …

我想开始在 WebStorm 中使用 PostCSS 插件，我想知道如何去做。

我用index.html&创建了新项目style.css。最后我设置了 PostCSS 方言。自动安装 PostCSS 插件。

我写的

main{
  height: 400px;
  width: 100%;
  section{
    width: 60%;
    height: 50px;
    border: 2px solid black;
  }
}

和 postcss-nest 不起作用。

我意识到有几个与此错误相关的问题，但据我所知，这是一种独特的情况，与不正确的import陈述无关。

我正在React用TypeScript和构建一个组件库webpack。

我的目录结构：

- src
  - index.ts
  - components
    - Button
      - Button.tsx
      - index.ts
      - Button.css
      - Button.d.css (generated by webpack plugin)
- package.json
- tsconfig.json
- webpack.config.js
- postcss.config.js

我的tsconfig.json：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "outDir": "dist",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "declaration": true
  },
  "include": [
    "src/**/*" …

我正在使用 PostCSS，我想添加 Post-uncss。我不使用任务运行器，只使用 Postcss-cli。我的 package.json 现在看起来像这样：

"css-clean": "npx postcss src\\css\\main.css -u autoprefixer --replace && npx postcss src\\css\\main.css -u css-declaration-sorter --replace --no-map"

它变得相当长。我看到提到 PostCSS 可以有一个配置文件“postcss.config.js”。文章中唯一提到的就是骨架：

module.exports = {
    plugins: {
      'autoprefixer': {},
      'css-declaration-sorter': {}
    }
  };

uncss 文档只说选项：

{
  html: ['index.html', 'about.html', 'team/*.html'],
  ignore: ['.fade']
}

我希望如果有人有使用配置文件的经验来提供一些建议，因为我不相信这个功能是有据可查的。

我做了npm build，然后我得到错误：

ERROR in .../PublishingFilter.css (./node_modules/css-loader/dist/cjs.js!./src/shared/publishingFilter/PublishingFilter.css)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    .../node_modules/css-loader/dist/plugins/postcss-icss-parser.js:34
          accumulator[normalizedUrl] = { ...accumulator[normalizedUrl],

节点 v6.17.1

npm v3.10.10