标签: postcss-loader

我正在尝试根据教程学习​​reactjs.同时本教程指示使用webpack编译样式表和JS资源.我遇到了一个错误,其中样式表无法编译并在使用webpack编译文件时抛出跟随错误.它显示以下错误:

   ERROR in ./src/stylesheets/hello.css (./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/stylesheets/hello.css)
Module build failed: Error: No PostCSS Config found in: E:\developer\start\src\stylesheets
    at E:\developer\start\node_modules\postcss-load-config\index.js:51:26
    at <anonymous>
 @ ./src/stylesheets/hello.css 2:14-124
 @ ./src/lib.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js

我已根据教程完成了所有工作,但不知怎的,这个错误仍然存​​在,无法解决这个问题,因为我对此非常陌生.我的webpack配置文件webpack.config.js如下:

    module: {
        rules: [
           {
                test: /\.css$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "postcss-loader" // compiles Sass to CSS
                }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes …

在我的项目中执行 NPM start 时遇到问题。我收到此错误消息：

./src/assets/base.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/base.scss)
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

我在 NX monorepo 中创建了一个 nextjs 应用程序，并开始将现有的 NX 应用程序（在同一个 monorepo 中）移植到其中。

我的 NX monorepo 设置了许多别名，所有别名都在根tsconfig.base.json文件中配置。例如，我将所有图像保存在图像库中，并从 JSX 中像这样加载它们：

import myImage from '@images/myImage.png';

这是我在 SCSS 文件中使用别名的方式：

background-image: url('@images/myImage.png');

这两个应用程序都可以在我现有的非 Nextjs 应用程序中工作，但是，当我将应用程序移植到新的 Nextjs 应用程序时，url()无法识别其中使用的别名。我得到的错误看起来像这样：

Module not found: Can't resolve '../themes/@images/myImage.png'

请注意，我的 css 文件位于其中，./themes因此它将别名@images/...url 视为相对路径并将它们附加到当前文件位置。

在 scss 中使用时正确处理别名路径的推荐方法是什么？

我正在尝试添加postcss loader到我的webpack 中，但是在添加了postcss loader显示Unknown word error. 我还附上了错误截图。请查收附件。不知道是什么错误....

我还加了postcss-loader, sass-loader, css-loader, style-loader。如果我做错了什么，请告诉我伙计们。

下面是我在配置文件和 package.json 文件中的加载器。

  module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: ["babel-loader", "ts-loader", "tslint-loader"]

    },
    {
      test: /\.css$/,
      include: __dirname + "./src/css",
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1
          }
        },
        'postcss-loader',

      ]
    },
    {
      test: /\.scss$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            sourceMap: isDevMode
          }
        },
        {
          loader: …

@ angular / cli @ 7 +允许customWebpackConfig指定以提供自定义Webpack配置，例如：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./build/custom-webpack.config.js",
          "mergeStrategies": {
            "externals": "prepend"
          }
        },
        ...

然后，从技术上讲，该文件允许您添加，添加或替换webpack配置的任何部分。在升级到@angular@7.1.3和之前，@angular/cli@7.1.3我们已经弹出webpack配置进行了一些添加。其中一个附加功能是postcss-momentum-scrollingpostcss-loader插件，该插件自动在所有可滚动容器上启用iOS动量滚动。

我正在寻求有关如何通过允许的受支持的自定义来生成必要的自定义Webpack代码以加载此插件的支持@angular/cli@7+。

这是我在custom-webpack.config.js文件中尝试过的示例：

const postcssMomentumScrolling = require('postcss-momentum-scrolling');

module.exports = {
  module: {
      rules: [
          {
              test: /\.scss$|\.sass$/,
              use: [
                  {
                      "loader": "postcss-loader",
                      "options": {
                          "plugins": [
                            postcssMomentumScrolling(),
                          ]
                      }
                  }
              ]
          },
      ],
  },
};

一旦我触摸webpack配置的scss块，它似乎会执行替换操作而不是合并或添加操作，从而破坏了构建。

我想知道是否有人对如何查看@angular/cli生成的初始Webpack配置有指导或建议，这是修改的起点，也是预览/查看要作为调试执行的代码的方法。

同样，类似定制的示例也很好。

谢谢！

我在使用@rails/webpacker加载本地字体文件时遇到问题。字体在开发环境中加载，但不在生产环境中加载。这似乎是一个非常简单的问题，但我遇到了很多麻烦。下面是我的@font-face 代码。我的字体存储在 app/assets/images/fonts

应用程序 > 资产 > 样式表 > 配置 > _fonts.scss

@font-face {
  font-family: "Axiforma";
  src: url("fonts/Kastelov-AxiformaRegular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Kastelov-AxiformaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Kastelov-AxiformaRegular.otf") format("opentype"), /* Open Type Font */
    url("fonts/Kastelov-AxiformaRegular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Kastelov-AxiformaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Kastelov-AxiformaRegular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Kastelov-AxiformaRegular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
}

在生产模式下获取字体文件会导致 404 错误。当我预编译资产时，我可以看到字体文件的文件名附加了一个哈希值。在传递给浏览器的 css 文件中，字体文件的 url 保持不变。为了解决这个问题，我尝试在环境模块规则中使用file-loader、url-loader和resolve-url-loader …

我将 CSS 模块与 webpack css-loader 一起使用，然后将它们与 mini-css-extract-plugin 捆绑在一起。这是我的配置的样子：

{
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          localIdentName: "[name]-[local]_[hash:base64:5]",
          imports: true,
          importLoaders: 1
        }
      },
      "postcss-loader"
    ]
  }

出于某种原因（请参阅评论部分），我真的很想将 postcss-loader 应用到不是每个单独的 .css 文件，而是应用到整个包。我怎样才能做到这一点？

我postcss-import用来处理我的进口，并cssnano缩小。在我的 Webpack 配置中，我一直在使用以下设置css-loader...

{
  loader: 'css-loader',
  options: {
    url: false,
    import: false,
    minimize: false,
    importLoaders: 1,
    souceMap: true,
  }
}

...但是当我删除所有内容时似乎仍然可以正常加载，所以现在我post-css之前只有style-loader. 我可以安全地css-loader从我的 css 构建中省略，还是它提供了一些其他必要的功能？我还没有看到一个webpack.config.js不使用的文件css-loader，所以我想在这里保持谨慎！:)

这是我Webpack的scss/css文件配置。

...
{
    test: /\.s?css$/,
    use: [
      'style-loader',
      { loader: 'css-loader', options: { importLoaders: 2 } },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: loader => [
            require('postcss-import')({ root: loader.resourcePath }),
            require('cssnano')(),
            require('postcss-cssnext')(),
          ]
        }
      },
      'sass-loader',
    ]
}
...

问题是，当我使用cssnext类似gray(100)的函数时，输出CSS文件在该函数所在的位置有一个空值。我想知道我在这里做错了什么。

即 background-color: gray(100);输出到background-color: ;

我是 postcss 的新手，所以我真的不知道它是如何工作的，也不知道如何正确配置它。

Bootstrap 5 支持 RTL，正如他们在文档中所说，他们使用 RTLCSS 来处理 RTL 样式。为了将 RTLCSS 与 Angular 集成，我使用 ngx-build-plus 和 custom-webpack 插件将 RTLCSS webpack 规则注入 Angular 中，但是当我使用 webpack 配置编译 Angular 时，它给了我错误，我尝试了 ngx-build-plus 和 custom -webpack 但当我清除 webpack 规则时，它们都有错误，我的项目编译成功，所以我的没有问题scss文件没有问题，这一定是 webpack 配置问题，但我找不到它。\n这是我的自定义 webpack js 文件

const rtlcss = require('rtlcss');\nconst autoprefixer = require('autoprefixer');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n            'sass-loader',\n          {\n            loader: 'postcss-loader', options: {\n              postcssOptions: {\n                plugins: [autoprefixer, rtlcss]\n              },\n            }\n          },\n        ],\n      },\n    ],\n  },\n};\n

正如你所看到的，我想传递所有的 scss 来通过 …