我通过 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 工作,但没有通过 …
我有一个任务,通过使用某种库来修改 css,向网站添加 rtl 支持,该库将从左到右交换,反之亦然,并将 [dir=rlt] [dir=ltr] 相应地附加到所有选择器。
到目前为止我所做的:
可能的解决方案:
目前,我正在尝试寻找工作处理器,但没有运气。
对于如何实现这一目标有什么想法吗?
我无法使用 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) 我使用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) 在 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) 我无法将 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 项目的信息。
感谢您的任何帮助。
我一直在尝试使用TailwindCSS来设计全新的SailsJS网站的样式。
从tailwind CDN引用预构建的 css效果很好,但为了自定义 css 并缩小 css 大小以进行生产,我需要使用完整的资源管道来构建 tailwind。
我遇到的问题是tailwind 推荐使用 PostCSS(这里 tailwind 也推荐使用 PostCSS)但是sailsjs 默认使用 grunt。理论上,我可以配置 SailsJS 来运行 PostCSS,但我花了很长时间尝试,而且我对各个部分缺乏了解,这意味着我还没有让它全部正常工作。
https://github.com/jeffjewiss/sails-hook-postcss看起来它可以解决问题,但我无法让它工作。
有人让这两个一起工作吗?你是怎么做到的?公共存储库链接将不胜感激。
这些是我对所有部分的各种未完成且尚未工作的尝试,以及其他相关资源:
是否可以将 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 样式。
所以......知道这是否可能吗?
使用包构建我的项目时出现此错误:
@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) 我正在使用 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)