标签: postcss

Postcss-cli 找不到 flexbugs-fixes 模块(但找到 autoprefixer 没有问题)

我通过 npm 在我的项目中安装了 postcss-cli autoprefixer 和 postcss-flexbugs-fixes 。pff 有未满足的 dep 警告,但它确实安装了。我知道我的 postcss 和 cli 正在工作,因为当我运行时

postcss --use autoprefixer index.scss
Run Code Online (Sandbox Code Playgroud)

从终端它工作得很好 - 我有一些虚拟的 css 在那里无论如何只是为了排除语法错误。

当我跑步时

postcss --use postcss-flexbugs-fixes index.scss
Run Code Online (Sandbox Code Playgroud)

我收到一条错误消息,指出找不到模块 postcss-flexbugs-fixes。可能值得一提的是,我使用的是 Node 4.4.5,但我之前已经在这个版本的 Node 上进行过 postcss-flexbugs-fixes 工作,唯一的区别(包括版本号)是它被包装在 gulp 任务中。这是完整的错误:

Error: Cannot find module 'postcss-flexbugs-fixes'
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 /Users/ohu275/.nvm/versions/node/v4.4.5/lib/node_modules/postcss-cli/index.js:107:14
at Array.map (native)
at Object.<anonymous> (/Users/ohu275/.nvm/versions/node/v4.4.5/lib/node_modules/postcss-cli/index.js:100:24)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
Run Code Online (Sandbox Code Playgroud)

我最终试图达到可以通过 npm 构建脚本运行 postcss 任务的地步。我已经有了 autoprefixer 工作,但没有通过 …

node.js node-sass postcss

5
推荐指数
1
解决办法
1万
查看次数

Angular 2+、rtlcss 集成

我有一个任务,通过使用某种库来修改 css,向网站添加 rtl 支持,该库将从左到右交换,反之亦然,并将 [dir=rlt] [dir=ltr] 相应地附加到所有选择器。

到目前为止我所做的:

  • 称为 ng 弹出
  • 添加了 rtlcss 处理器作为 postcss 插件,但它不符合我的要求。我需要它将 [dir=*] 附加到选择器。
  • 尝试了其他插件,但它们不起作用。

可能的解决方案:

  • 制作两个css文件并动态加载它们。(但是你需要将 ViewEncapsulation.None 添加到所有组件)不好,没有那么多工作,但可以破坏布局
  • 制作两个 css 文件并作为两个不同的应用程序运行。一种用于 RTL,一种用于 LTR。不好,没有资源
  • 手工制作rtl。不好,工作太多
    • 忘记 RTL 处理器并制作 sass mixins。不好,工作太多
  • 制作一个带有正确生成前缀的 css 文件,[dir=ltr] 和 [dir=rtl] 这将导致 css 大小加倍,但最终会起作用。很好,但不知道该怎么做
    • 创建自定义库来执行此操作,或分叉现有库进行修改
    • 找到工作处理器

目前,我正在尝试寻找工作处理器,但没有运气。

对于如何实现这一目标有什么想法吗?

css bidi webpack postcss angular

5
推荐指数
0
解决办法
511
查看次数

字体加载器 postcss

我无法使用 postcss 加载字体。

我的 src 目录中有字体文件,如下所示: https ://i.stack.imgur.com/KYCym.png

我的 css 文件如下所示:

@font-face{
    font-family: Boxley ;
    src: url(./fonts/Boxley.ttf), format('ttf');
}
@font-face{
    font-family: Boxley-Bold;
    src: url(./fonts/Boxley-Bold.ttf), format('ttf');
}
Run Code Online (Sandbox Code Playgroud)

等等。我的 Postcss.config.js 看起来像这样:

module.exports = {
    plugins: [
        require('precss'),
        require("css-mqpacker"),
        require("postcss-cssnext"),
        require("cssnano"),
        require("rucksack-css"),
        require("postcss-font-magician")({
        hosted: ['./src/css/fonts']
    })]
}
Run Code Online (Sandbox Code Playgroud)

我的 webpack 文件如下所示:

module: {
    rules: [{   
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        { 
            test: /\.(png|woff|woff2|eot|ttf|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: 'url-loader?limit=100000' 
        },
        {
            test: /\.css$/,
            loaders:ExtractTextPlugin.extract(['css-loader', 'postcss-loader']),
        },
        {
            test: /\.scss$/,
            loaders: ExtractTextPlugin.extract(['css-loader', 'postcss-loader']),               
        }, …
Run Code Online (Sandbox Code Playgroud)

css fonts reactjs webpack postcss

5
推荐指数
1
解决办法
5691
查看次数

create-react-app 构建错误“需要伪类或伪元素。”

我使用create-react-app创建一个应用程序,并在尝试构建生产优化版本时遇到错误yarn build

> yarn build help
yarn run v1.9.4
$ react-scripts build help
Creating an optimized production build...
Failed to compile.

Expected a pseudo-class or pseudo-element.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Run Code Online (Sandbox Code Playgroud)

不幸的是,这不是一个非常有用的错误。谷歌搜索似乎找到了有关postcss的内容,但我不确定它与 create-react-app 有何关系,或者如何解决该问题。

以前有人遇到过类似的问题吗?


请注意,该应用程序在开发模式下编译良好:

Compiled successfully!

You can now view note-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.0.54:3000/

Note that the development build is not optimized.
To create a production build, …
Run Code Online (Sandbox Code Playgroud)

postcss create-react-app

5
推荐指数
1
解决办法
8748
查看次数

在 NPM 脚本中找不到模块自动前缀

在 Windows 10 和 npm 版本 6.9.0 下,我无法让以下脚本运行:

"build:css": "postcss --use autoprefixer -b 'last 2 versions' < ./static/css/main.css"  
Run Code Online (Sandbox Code Playgroud)

我总是在 Windows 控制台中收到相同的错误,如下所示:

Plugin Error: Cannot find module 'autoprefixer'

我尝试将语法更改为以下语法,但没有结果:

"build:css": "postcss --use autoprefixer -b \"last 10 versions\" ./static/css/main.css -o ./static/css/main-prefixed.css"
Run Code Online (Sandbox Code Playgroud)

谁能告诉我这里有什么问题吗?老实说,我对这个 npm 脚本很陌生。

我的package.json看起来像这样:

{
  "name": "test-automate-npm",
  "version": "1.0.0",
  "description": "test",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "echo 'Compiling SCSS' && node-sass --watch scss -o ./static/css",
    "build": "npm run scss && …
Run Code Online (Sandbox Code Playgroud)

npm autoprefixer postcss npm-scripts

5
推荐指数
1
解决办法
8587
查看次数

如何将 tailwindcss 添加到 KotlinJS

我无法将 tailwindcss 库添加到我的 KotlinJS 项目中。我尝试了很多事情。

我在build.gradle.kts中定义了多个依赖项

implementation(npm("postcss", "latest"))
implementation(npm("postcss-loader", "latest"))
implementation(npm("tailwindcss", "1.8.10"))
Run Code Online (Sandbox Code Playgroud)

我尝试使用以下内容在webpack.config.d中创建tailwindcss.js

config.module.rules.push({
        test: /\.css$/i,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        plugins: [
                            [
                                'tailwindcss'
                            ],
                        ],
                    },
                },
            }
        ]
    }
);
Run Code Online (Sandbox Code Playgroud)

但这没有任何作用。我也尝试使用多个选项修改它,但我始终无法编译 tailwindcss。我还尝试在build.gradle.kts中禁用和启用 KotlinJS CSS 支持

我找不到任何有关如何将 postcss 添加到 KotlinJS 项目的信息。

感谢您的任何帮助。

kotlin webpack postcss tailwind-css kotlin-js

5
推荐指数
1
解决办法
1759
查看次数

如何配置 sails + tailwindcss 协同工作

我一直在尝试使用TailwindCSS来设计全新的SailsJS网站的样式。

从tailwind CDN引用预构建的 css效果很好,但为了自定义 css 并缩小 css 大小以进行生产,我需要使用完整的资源管道来构建 tailwind。

我遇到的问题是tailwind 推荐使用 PostCSS这里 tailwind 也推荐使用 PostCSS)但是sailsjs 默认使用 grunt。理论上,我可以配置 SailsJS 来运行 PostCSS,但我花了很长时间尝试,而且我对各个部分缺乏了解,这意味着我还没有让它全部正常工作。

https://github.com/jeffjewiss/sails-hook-postcss看起来它可以解决问题,但我无法让它工作。

有人让这两个一起工作吗?你是怎么做到的?公共存储库链接将不胜感激。


这些是我对所有部分的各种未完成且尚未工作的尝试,以及其他相关资源:

sails.js postcss tailwind-css

5
推荐指数
1
解决办法
598
查看次数

Blazor 组件与 tailwind/postcss 隔离的 css

是否可以将 tailwind 和 postcss 语法用于 blazor 组件隔离的 css?

我真的很喜欢 Tailwind 作为 CSS 框架,特别是它对 postcss 的使用以及@apply您可以将 Tailwind css 组件捆绑到单个类中的功能。

例如

.some-button {
    @apply px-4 py-2 bg-blue-400 text-white
}
Run Code Online (Sandbox Code Playgroud)

我一直在考虑使用 Svelte,因为它提供了 CSS 隔离和 postcss @apply 语法。然而,既然 Blazor 支持独立 CSS,我真的很想更进一步,能够从组件 CSS 中编写 postcss 样式。

所以......知道这是否可能吗?

postcss blazor tailwind-css

5
推荐指数
1
解决办法
702
查看次数

如何解决错误:“@parcel/transformer-postcss:PostCSS 配置必须有插件”

使用包构建我的项目时出现此错误:

@parcel/transformer-postcss: PostCSS config must have plugins

at load ([projectpath]/node_modules/@parcel/transformer-postcss/lib/loadConfig.js:166:13)
Run Code Online (Sandbox Code Playgroud)

自从我升级包裹后就发生了这种情况。我不太清楚,我应该如何设置插件我尝试在项目上添加 .postcssrc json 文件

(添加在我发出“parcel build ...”的位置,但似乎它没有看到它,因为我收到一条消息,例如:使用 javascript PostCSS 配置文件意味着丢失... 使用 .postcssrc json尽可能归档)

.postcssrc json 文件内容:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

parcel node.js postcss

5
推荐指数
0
解决办法
2006
查看次数

如何使用 Rollup 使 React 组件导入提取的 scss 模块文件?

我正在使用 Rollup 制作一个 React 组件库,并使用以下组件设置:

//component A
import styles from './stylesA.module.scss'

const ComponentA = () => {
  return(
    <div className={styles.red}>Component A Styled</div>
  )
}

export { ComponentA }

Run Code Online (Sandbox Code Playgroud)
//stylesA.module.scss
.red {
  color: red;
}
Run Code Online (Sandbox Code Playgroud)

如何配置 Rollup 以便我的输出组件自动将生成的.css 文件导入到我的组件中?请注意,我不想将样式捆绑到文件中.js,也不想在导入最终包时手动导入样式import 'my-library/dist/stylesA.css'

我的 rollup.config.js 目前看起来像这样:

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import pkg from './package.json'


export default {
  input: 'src/index.js',
  output: [{
    dir: './dist',
    format: 'cjs'
  }],
  plugins: [
    resolve(),
    babel({ …
Run Code Online (Sandbox Code Playgroud)

rollup sass reactjs postcss css-modules

5
推荐指数
0
解决办法
885
查看次数