标签: postcss

我想允许用户在我的网站上选择主题,他们将通过下拉菜单来做.我目前无法弄清楚如何支持这个功能,但没有编写愚蠢的代码.

我目前使用css-modules和postcss来让我的生活更轻松.Webpack用于将所有内容捆绑在一起.我在开发过程中使用热重新加载,在此期间我使用样式加载器.

完整配置如下所示

{
  test: /\.css$/,
  loader: !isDev
    ? ExtractTextPlugin.extract('style-loader', 'css-loader?sourcemap&minimize&modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!postcss-loader')
    : 'style-loader!css-loader?sourcemap&minimize&modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!postcss-loader'
},

解决方案1

在body标记上放置一个classname以确定加载了哪个主题.然后,这用于从每个组件css内部选择正确的主题.这是非常乏味的,我想避免的,但它看起来像这样:

.myComponent {
  margin: 10px;
  width: 100px;
}

:global(.theme1) {
  .myComponent {
    background: $theme1_myComponent_background;
  }
}

:global(.theme2) {
  .myComponent {
    background: $theme2_myComponent_background;
  }
}

这很快就会变成难以扩展和不可维护的东西,这就是为什么我要避免它.

解决方案2

为css生成预定义的静态包.当用户请求/main.css时,服务器上的处理程序确定要发送的主题(也许查询字符串),并将它们发送theme1-main.css或theme2-main.css或类似的规定.问题是我不知道如何支持开发环境.

关于这一点的好处是我的css文件不需要任何额外的和难以维护的逻辑:

.myComponent {
  margin: 10px;
  width: 100px;
  background: $myComponent_background;
}

解决方案3

使用本机css变量.然后可以在运行时更新这些内容,这将反映已经加载的css并在生产和开发环境中正常工作.我的组件也看起来像(或类似)解决方案2.这里的问题是它们本身并没有得到广泛支持,我不确定是否有任何值得研究的polyfill会为我做这类事情.

总而言之,这些是我的想法.我还没有得出任何明确的结论,并希望得到关于如何解决这个问题的所有反馈.也许我正在考虑这一切都错了,并且有更好的方法来做我想做的事情.

提前致谢!

我正在尝试设置webpack以获得一个编译传递,它会扫描一个文件树中的所有css文件,然后生成一个css文件,其中包含所有样式的捆绑,autoprefixed和最小化.

我无法让autoprefixer插件工作.

这是相关的webpack配置部分:

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

// postCSS plugins
const autoprefixer = require('autoprefixer')

module.exports = [
{
  // another compilation pass
},
{
  name: 'static-css',
  entry: {
    vendor: glob.sync(path.join(__dirname, 'assets/stylesheets/vendor/**/*.css')),
    styles: glob.sync(path.join(__dirname, 'assets/stylesheets/src/**/*.css'))
  },
  devtool: 'source-map',
  output: {
    path: path.join(__dirname, 'assets/stylesheets/build/'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      // css loader for custom css
      {
        test: /\.css$/,
        include: path.join(__dirname, 'assets/stylesheets/src'),
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
      },
      // css loader …

我有以下 webpack 配置：

test: /.css$/,
use: extractAppStyles.extract({
    fallback: 'style-loader',
    use: [{
        loader: 'css-loader',
        query: {
            modules: true,
            importLoaders: 1,
            sourceMaps: false
        }
    }, {
        loader: 'postcss-loader'
    }]
})

和postcss.config.js：

module.exports = {
    plugins: [
        require('precss'),
        require("postcss-extend")
    ]
};

我想在本地 css 模块中使用 postcss-extend 插件，以便我可以在本地模块中扩展一些全局定义的选择器，例如：

.test {
   @extend :global(.some-class);
}

哪里.test是本地的，.some-class是全球的。使用当前设置，只能扩展本地定义的选择器，而全局变量似乎未定义：

':global(.some-class)', 还没有定义，所以不能扩展

加载程序的顺序似乎是问题所在，我认为模块在由postcss-extend插件处理时没有得到解决。我postcss-modules之前尝试使用插件，postcss-extend但没有按预期工作。

有没有人想出如何结合使用两者，以便可以在本地扩展全局定义的选择器？

我正在用angular 4开始一个新项目，我想与PostCss集成以使用模块，例如：Autoprefixer，CSSNext和另一个模块。我在很多地方进行了搜索，但仍然找不到解决方案。任何帮助表示赞赏！提前谢谢了。

问候....

我为我的 javascript 设置了一个 Webpack 配置并顺利运行，但是当我尝试将 PostCSS 添加到同一个配置时，开始出现问题。它确实有效，并生成了我的 CSS，但同时也抛出了一些奇怪的错误，我对此感到非常困难。

$ npm run env:dev -- webpack-dev-server
> arc@0.1.0 env:dev /Users/mattias/projects/pestbarn.github.io
> cross-env NODE_ENV=development "webpack-dev-server"

Project is running at http://localhost:3000/
webpack output is served from /

WARNING in ./src/postcss/base.postcss
(Emitted value instead of an instance of Error) resolve-url-loader cannot operate: CSS error
    ENOENT: no such file or directory, open 'src/postcss/%3Cno%20source%3E'
    at Object.fs.openSync (fs.js:584:18)
    @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/postcss/base.postcss webpack/hot/only-dev-server

Child extract-text-webpack-plugin:

WARNING in ./~/css-loader?importLoaders=1!./~/resolve-url-loader!./~/postcss-loader/lib?sourceMap=inline!./src/postcss/base.postcss
(Emitted value instead of an instance of Error)   resolve-url-loader …

我相信现在可以在svelte config中使用预处理器。但是我还没有成功完成它……（猜想社区可以在Rollup和Webpack中使用一个有效的示例）。

在进一步修改之前，我想知道是否可以在svelte编译器中使用rollup / webpack config预处理global.css（或任何“非组件式” css），因为它可以编译主要js？

尽管我确实喜欢将CSS绑定到组件的想法，但是有些开发人员不仅依赖全局样式，而且也依赖于组件样式，因此他们不必在每个组件中都重复样式。

没有代码可以显示，因为我不知道从哪里开始？

我最近开始实现 CSS 自定义属性，但需要支持 IE11 - 因此需要 postcss-preset-env。到目前为止，我发现 Angular 的 webpack 配置不是很可定制，但我已经安装了自定义 webpack ( https://www.npmjs.com/package/@angular-builders/custom-webpack )。

如何设置配置文件以包含和配置 postcss-preset-env 插件以正确填充我的 CSS 自定义属性以在所有浏览器中工作？我希望使用 postcss-preset-env 编译任何 CSS 文件和 Angular 组件样式。到目前为止，我已经使用以下内容创建了一个 custom-webpack.config.js 文件：

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

module.exports = {
  plugins: [
    postcss([
      postcssPresetEnv()
    ]).process()
  ]
}

我还更新了 angular.json 构建属性以引用此文件。

我正在使用 Webpacker 编写 Rails 6 webapp。我的理解是 Rails 6 中的自动前缀通过 PostCSS 和它的 autoprefixer 插件开箱即用。

但是我无法验证这个库是否实际上是我的 css 的前缀。

有没有办法确认标准默认 Rails 6.0.0 应用程序是否开箱即用自动前缀？

我已经跑去yarn autoprefixer --info看了它适用的 css 规则和浏览器，以及它适用于我的浏览器的 def chrome 77。我尝试使用它列出为适用的参数。然而，它仍然没有在开发或生产中显示任何带前缀的 css。

我不确定它是如何postcss-preset-env工作的，所以我不确定在使用需要前缀的浏览器时 css 是否只有前缀。

我来自使用 autoprefixer-rails gem，它挂在链轮上，只是给所有东西加上前缀。

这是我的.postcss.config.js文件...

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

我想知道是否有人有幸让 PostCSS Autoprefixer 与 Rails 6 一起工作？

上一篇我确定 autoprefixer 不起作用的帖子。

有没有办法测试 PostCSS Autoprefixer 是否正常工作？专用于 Rails 6

这是我的postcss.config.js...

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

这是我的packs/application.js...

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("bootstrap/dist/js/bootstrap")
require("pretty-checkbox/dist/pretty-checkbox.min.css")

我使用 PostCSS 在我的项目中包含 Tailwind CSS，并让 Tailwind 的内置 Purge 实现非常适合核心库（style.pcss如下所示）。但是，我也将其@tailwind/typography作为插件包含在内，并且它的选择器不会被清除。

// postcss.config.js

const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'), 
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : null
  ]
}

// tailwind.config.js

module.exports = {
  plugins: [
    require('@tailwindcss/typography')
  ],
  purge: [
    './build/*.html',
    './build/**/*.html'
  ],
}

// style.pcss

@tailwind base;
@tailwind components;
@tailwind utilities;