标签: postcss

我正在尝试使用PostCss并试图找到与Sass相似的功能.我坚持的一个功能是类似Sass的功能.

这是我的功能是Sass:

// Variables.scss
$columns: 12; // Grid columns
$max-width: 1200px; // Grid max width

// Function.scss
@function grid($cols,$to-px:false) {
  @if ($to-px == false) { @return ($cols / $columns) * 100% };
  @return round(($max-width / $columns) * $cols);
}

// style.scss
.class {
  width: grid(3);
}
.class2 {
  width: grid(3,true);
}

// outputs to:

// style.css
.class {
  width: 25%;
}
.class2 {
  width: 300px;
}

在PostCSS中,我可以编写一个返回单个CSS值的函数吗？

我已从过去的方式切换为不再包含样式表：

<link rel="stylesheet" href="./../css/main.css">

Webpack方法：

var css = require('./../css/main.css');

它可以工作，但是我不喜欢它从该文件中将css提取到内联标签中，因为那样很难在Dev Tools中对其进行调试。例如，我不知道这些属性来自哪个文件和行：

如何将其移动到单独的文件或生成将我指向源文件的源映射？因此，当我检查开发工具时，它将看起来像这样：

我的webpack.config.js：

var autoprefixer = require('autoprefixer');

module.exports = {
    devtool: "css-loader?sourceMap",
    module:  {
        loaders: [
            {test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'},
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    entry:   [
        './static/js/app.js'
    ],
    output:  {
        filename: './static/js/bundle.js'
    },
    watch:   false,
    postcss: function () {
        return [autoprefixer];
    }
};

我的app.js：

var $ = require('jquery');
window.jQuery = $;
window.$ = $;
require('bootstrap-loader');

module.exports = (function () {
    alert('IT WORKS!'); …

Webpack / PostCSS无法处理具有内联注释的.pcss文件：

模块构建失败：语法错误

(77:5) Unknown word

> 77 |     //  }
     |     ^

Run Code Online (Sandbox Code Playgroud)

我的Webpack配置的PostCSS部分：

let PostCSSConfig = {
        sourceMap: true,
        plugins:   () => [
            require('postcss-smart-import'),
            require('precss')({}),
            require('postcss-for')({}),
            require('postcss-mixins')({}),
            require('postcss-math')({}),
            require('postcss-percentage')({}),
            require('postcss-flexbugs-fixes')({}),
            require('postcss-cssnext')({browsers: ['> 0.05%', 'IE 7'], cascade: false})
        ]
    };

config.module.rules：

{
    test: /\.pcss$/,
    exclude: inlineCSS,
    use: ExtractTextPlugin.extract({
        use: [{
                loader: 'css-loader',
                options: {
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: PostCSSConfig
            }
        ]
    })
}

我尝试使用以下插件：

• 事后评论
• postcss在线评论
• postcss-scss
• postcss-条评论

但没有帮助，我每次都会出错。

如何使用 node-sass 的输出通过 postcss autoprefixer。

我不打算使用任何 webpack 或 gulp。

我纯粹使用节点包中的 cli

这是我当前的 npm 脚本

node-sass --watch ./src/scss --output ./dist/assets/css | postcss ./dist/assets/css/app.css --use autoprefixer --output ./dist/assets/css/app-dist.css

只有当我以不同的名称输出到同一个文件夹时，一切才有效。但是如果我想输出到相同的名称，它就不起作用。

所以流程是 scss -> css -> autoprefixer ->compiled.css

我在一个项目中使用 PostCSS，CSS 文件的扩展名是.css这样，当我打开一个时，它会指示一堆错误（由于 PostCSS 的语法）。

我试过安装stylelint、PostCSS syntax扩展等......但没有任何效果。

如果我将扩展名更改为.scss，它可以正常工作，但我没有使用 SASS。

我应该怎么做才能消除.css文件中的解析错误？

更新：

带有 PostCSS 扩展名的文件示例，因为您可以看到糟糕的着色并且没有突出显示错误

如果我将文件扩展名更改为 .scss ：

更新2：

我试过这个插件，它的作用就像一个魅力：https : //marketplace.visualstudio.com/items?itemName=mhmadhamster.postcss-language

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    CssSyntaxError

    (1:4) Unknown word

    > 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
        |    ^
      2 | 
      3 | // load the styles

     @ ./node_modules/vue-slider-component/theme/antd.css 4:14-338 14:3-18:5 15:22-346

在 Webpack 4 中构建我的应用程序时出现此错误。这是我的 CSS 加载器配置：

{
    test: /\.css$/,
    use: ["vue-style-loader", "css-loader", "postcss-loader"]
},
{
    test: /\.scss$/,
    use: ["vue-style-loader", "css-loader", "postcss-loader", "sass-loader"]
}

我怎样才能稍微放宽规则，这样它就不会在这类问题上失败？

谢谢

我正在尝试使用 Svelte.js 和 Ionic v4 构建一个移动应用程序。

1）我得到了苗条的模板。

2) 使用 npm install @ionic/core@latest --save 安装 ionic。

3) 安装 postcss 并在 global.css 中导入 @ionic css

Rollup 正在提取 @ionic css，但它的工作方式似乎有问题。离子成分是可访问的，但我什么也看不到。未正确应用 css。

有没有人设法让 Svelte 与 Ionic v4 一起工作？或者至少，带有一些香草 js 的 Ionic？

我最近将我的代码库从 Angular 11 更新到 12，在那之后，我无法部署我的代码。我可以运行ng build并且ng serve它可以完美运行，但是，当我运行时，ng build --prod我不断收到以下错误，可能是因为对 prod 版本进行了优化（缩小）：

该文件D:\Code\Airbox\frontend\styles.670357240e7c04682d1d.css:9031:1不存在，它显然是由部署脚本创建的，但我无法看到或访问它。我试图从我的全局 css 文件中删除注释和导入，但问题一直在发生。

我在互联网上找不到任何解决方案，我不知道发生了什么或如何找到解决方法。

我试图找出postcss-loader有什么用。

在github页面上

https://github.com/postcss/postcss-loader

它说：

用于webpack的Loader以使用PostCSS处理CSS

我不明白：所以，PostCSS是一个用PostCSS处理CSS的WP-Loader吗？

恕我直言，这是一个循环定义。

那么什么是PostCSS，它是CSSLoader吗？或者，由于它被称为Post CSS，它是要在其他CSS加载程序之后运行的加载程序吗？

我按照这个安装步骤在 create-react-app 中配置了 tailwindcss。它有效，但在添加 tailwindcss/jit 后，应用程序无法正常工作。我认为这是因为 create-react-app 不支持 PostCSS 8，但似乎 tailwindcss/jit 需要 PostCSS 8。

任何的想法？