我正在尝试设置汇总以使用SCSS样式表和Lost网格系统,这需要通过PostCSS进行解析.我已经验证SCSS正在被正确解析,但PostCSS处理器似乎没有任何影响.

根据rollup-plugin-sass文档,我只需要将vanilla JS函数传递给该processor选项.这没有错误,但生成的CSS没有什么不同.

这是我的汇总配置,用rollup -c config/dev.js:

// Rollup plugins.
import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import globals from 'rollup-plugin-node-globals';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';
import postcss from 'postcss';
const postcssProcessor = postcss([require('autoprefixer'), require('lost')]);

export default {
  dest: 'dist/app.js',
  entry: 'src/index.jsx',
  format: 'iife',
  plugins: [
    resolve({
      browser: false,
      main: true
    }),
    sass({
//      processor: postcssProcessor,
      output: 'dist/styles.css'
    }),
    babel({
      babelrc: false,
      exclude: 'node_modules/**',
      presets: [ …

假设我有一个看起来像这样的css文件:

/* Base styles */
.content {
    background-color: var(--background);
    color: var(--text);
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

@media (min-width: 500px) {
    .content {
        font-size: 22px;
    }
}

/* Headers */
h2 {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

/* Classes */
.small-caps {
    font-feature-settings: "tnum";
    letter-spacing: 0.05em;
}

使用PostCSS,您可以使用另一个类的属性,如下所示:

.another-class {
    composes: content from "other-file.css";
}

......将编译为:

.another-class {
    background-color: var(--background);
    color: var(--text);
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px; …

我有一个使用webpack的项目，该项目利用了PostCSS加载程序和代码拆分功能。使用以下方法，使用SASS加载程序将模块的CSS直接导入到入口点中。

import '@/css/modules/components/_accordion.scss'

某些模块使用CSS自定义属性，这些属性在上面导入的同一入口点的单独模块中声明。

import '@/js/modules/common'

这很好用，但是，只有公共模块中使用的自定义属性可以按照PostCSS加载程序的期望转换为已编译CSS中的十六进制值，而不是随后导入入口点（例如_accordion.scss）的其他每个SASS模块中使用的属性。

作为一种解决方法，为了使它们得以转换，我目前正在导入每个SASS模块顶部包含自定义属性的文件。

@import "css/tools/variables/colors";

但是，这意味着自定义属性声明在多个CSS文件（块）中重复。

我想要一个避免在已编译的CSS中重复声明的解决方案，同时确保所有自定义属性均按PostCSS的期望进行转换。

PostCSS 插件出现未知错误。您当前的 PostCSS 版本是 8.3.0，但 postcss-preset-env 使用 7.0.36。任何人都知道为什么会发生这个错误？

目标

我正在更新我的旧版本gulpfile.js,以前主要用于将我的Sass编译成CSS,但现在我正在尝试让Gulp执行以下操作:

1. 同步浏览器,启动localhost服务器 - 完成
2. 编译Sass => CSS - DONE
3. 使用JSHint显示任何JavaScript错误 - 完成
   • 用Babel编译ES6 => ES6 (WORKING ON)
4. 缩小所有资产 (WORKING ON)
   • 显示项目文件大小 - 完成
5. 将index.html,style.css和images部署到S3 (WORKING ON)
6. 监视文件,在更改时重新加载浏览器.scss或.html更改 - 完成

问题

• 试图缩小我的Javascript并创建一个scripts.min.js 文件,它会不断为每个新的缩小的JavaScript文件添加后缀min.

文件夹结构

index.html
gulpfile.js
package.json
.aws.json
.csscomb.json
.gitignore

assets
- css
style.css
style.scss

--partials
---base
---components
---modules

- img
- js
scripts.js

- dist

gulpfile.js

// Include Gulp
var gulp = require('gulp');
var postcss = require("gulp-postcss");

// All of your plugins …

我有一个项目有一组css文件(每个反应组件一个).我正在使用webpack中的css-loader(带模块)以及postcss-cssnext.

理想情况下,我想要一个单一的,variables.css所以我可以跨css文件共享变量.我试过variables.css包含类似的东西:

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  ...
}

我然后导入所以它通过css加载器.问题是,其他文件没有接收到这些变量,所以要么这不起作用,要么我做错了(包括在组件css文件中直接工作).

有效的一件事是拥有一个styles.json带有以下webpack设置的文件:

postcss: function (webpack) {
    return [
        ...
        require("postcss-cssnext")({
          features: {
            customProperties: {
              variables: require('./src/styles.json')
            }
          }
        })
        ...
    ]
}

这个问题的主要问题是每次我改变一个变量我都要重新启动webpack dev服务器(所以重新加载webpack配置).这不太理想.

那么,有什么想法更好地做到这一点？

下面是我的Greeter.jsx文件:

import React, {Component} from 'react';
import cssModules from 'react-css-modules';
import {Button} from 'react-bootstrap';
import styles from './Greeter.css';

const option = {
  'allowMultiple': true
};

class Greeter extends Component{
  render() {
    return (
      <div styleName='root root-child'>
        <h1>Welcome to React Devops.</h1>

        <p styleName="para">This is an amazing para.</p>
        <p>Hot module reload.</p>

        <Button bsStyle="primary">Test</Button>
      </div>
    );
  }
}

export default cssModules(Greeter, styles, option);

下面是我的main.js文件:

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';

import './main.css';

render(<Greeter …

我正在编写一个带有 typescript、sass 和 rollup 的 react 组件库，我希望它尽可能独立。

有没有人对如何最好地包含 scss 文件中引用的资产（图像和字体）有任何建议？

一种解决方案可能是某种加载程序（例如 postcss 处理器），用 base64 版本替换 scss 文件中引用的所有图像和字体资产。

有没有人有一个例子可以有效地做到这一点？任何解决方案或建议将不胜感激

我的汇总配置如下所示：

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import scss from 'rollup-plugin-scss'
import sass from "rollup-plugin-sass";
import commonjs from "rollup-plugin-commonjs";
import copy from "rollup-plugin-copy";
import url from '@rollup/plugin-url';

import packageJson from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: …

我react-ts使用创建了一个新应用程序yarn create @vitejs/app my-app --template react-ts。

我使用安装了顺风yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest。

我初始化了顺风：npx tailwindcss init -p。

我设置from并to在postcss.config.js：

module.exports = {
  from: 'src/styles/App.css',
  to: 'src/styles/output.css',
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

我App.css在以下位置创建了一个文件src/styles：

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

根据https://vitejs.dev/guide/features.html#postcsspostcss-load-config ，允许任何有效的语法。from并且to 似乎是被允许的。

当我调用yarn devwhich本质上运行时vite，我的应用程序正在启动，没有构建错误，但未生成顺风输出。

我究竟做错了什么？

目前正在使用 ViteJs 构建 React 项目，该项目使用 TailwindCSS 和 PostCSS。

我希望在生产版本中混淆顺风类名。喜欢。object-cover​ a2另外，我的目标不是缩小。

我尝试寻找解决方案，但没有运气。

这是 postcss 配置：

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