标签: postcss-loader

我正在尝试使用一系列加载器将所有SCSS文件解压缩到一个文件中ExtractTextPlugin.在我拥有的一系列加载器中,我正在使用autoprefixer内部使用的插件postcss-loader.但是,似乎没有任何前缀!

我的webpack配置如下:

webpack.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
  context: __dirname,
  entry: {
    app: [
      path.resolve(entrypath),
    ],
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [autoprefixer()]
              }
            }
          ]
        }),
      },
    ],
  },
  output: {
    path: path.join(__dirname, '../app/assets/javascripts/generated/'),
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'compiled-draft-document-scss.css',
      allChunks: true
    }), …

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

在github页面上

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

它说：

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

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

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

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

我正在使用webpack和postcss-loader来自动修复和缩小我的CSS,然后将其加载到css-loader中以使用css-modules.我在缩小CSS方面遇到了麻烦.通过webpack检查发出的.js文件显示CSS没有用cssnano缩小(因为我仍然可以看到空格字符).我究竟做错了什么？

一些相关的配置文件:

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

var postCompileScript = require('./postCompile');

module.exports = {
  entry: './src/popup.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { 
            loader: 'css-loader', 
            options: { 
              modules: true,
              localIdentName: '[local]__[hash:base64:6]',
              importLoaders: 1,
              minimize: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('autoprefixer')({})
              ],
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: …

我面临着一个问题webpack。我的项目具有以下结构。

文件夹结构：

src
  js
    app.js  // For importing app.scss file
    vendor.js // For importing vendor.scss file
  scss
    app.scss // Our custom styles
    vendor.scss // Require all vendor styles from node_modules
package.json
postcss.config.js
webpack.config.js

文件夹内scss有 2 个文件app.scss& vendor.scss. app.scss文件包含我们所有的自定义样式，vendor.scss文件包含所有供应商样式，例如引导库样式。

webpack命令后：

npm run dev

Webpackscss通过files导入这些文件JavaScript，并通过文件夹添加供应商前缀postcss-loader并输出dist 。

但我不想在vendor.scss文件中添加供应商前缀，因为供应商库已经有供应商前缀。那么有没有办法vendor.scss从postcss-loader.

完整代码：

src/js/app.js：

import '../scss/app.scss'

src/js/vendor.js：

import '../scss/vendor.scss'

src/scss/app.scss：

// Our custom …

我正在尝试在 Heroku 上部署我的 nuxt 应用程序，但是每次我尝试部署它时，都会收到此错误消息，内容如下：

ERROR in ./node_modules/argon-design-system-free/assets/css/argon.min.css (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/argon-design-system-free/assets/css/argon.min.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: postcss-svgo: Error in parsing SVG: Unquoted attribute value
Line: 0
Column: 12
Char: \
    at promises.push.getSvgo.optimize.then.catch.error (C:\Sites\unsplash-app\node_modules\postcss-svgo\dist\index.js:95:19)
 @ ./node_modules/argon-design-system-free/assets/css/argon.min.css 4:14-147
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

每次运行yarn build命令来构建我的项目时都会发生此错误。

在我的项目中，我决定使用名为Argon Design的免费设计系统，错误表明它的argon.min.css文件有问题，我不知道此时应该如何进行。

为了诊断问题，我尝试将xml-fix-loader模块安装到我的项目中，但它没有帮助解决我的问题。万一安装时是否应该执行其他步骤？

我正在尝试将tailwindcss v3添加到现有的故事书设置中。

我已经尝试并遵循了所有具有类似功能的指南。请帮忙。

在尝试设置 tailwindcss 之前它正在做什么

• Storybook 运行并编译组件和故事。
• PostCSS 8+ 带有一些插件。

我做了什么

• 已安装tailwindcss

• 添加tailwindcss:{}到postcss.config.js

• 我将新添加的导入styles/globals.css到storybook/preview.js

像这样：import './styles/globals.css';并添加了指令

/******** storybook/styles/globals.css ********/

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

• 我在中设置了以下配置main.js

/******** storybook/main.js ********/

module.exports = {
  stories: ['./stories/*.stories.mdx', './stories/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  staticDirs: ['./public'],
  core: {
    builder: 'webpack5',
  },
};

我运行时遇到的错误yarn storybook。

/******** …

尝试启动使用节点 14.17.0 运行的 CRA 项目时出现以下错误 -> 加载 PostCSS“postcss-preset-env”插件失败：找不到模块“node:vm”

编译有问题：X

./src/app.css 中的错误 (./node_modules/css-loader/dist/cjs.js??ruleSet 1 .rules[0].oneOf[5].use 1 !./node_modules/postcss-loader/dist /cjs.js??ruleSet 1 .rules[0].oneOf[5].use[2]!./src/app.css)

模块错误（来自./node_modules/postcss-loader/dist/cjs.js）：加载PostCSS“postcss-preset-env”插件失败：找不到模块“node：vm”需要堆栈：

• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/@csstools/postcss-trigonometric-functions/dist/index.cjs
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-preset-env/dist/index.cjs
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/utils.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/index.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/cjs.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/loadLoader.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/LoaderRunner.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack/lib/NormalModule.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack-manifest-plugin/dist/index.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-scripts/config/webpack.config.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/overrides/webpack.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/scripts/start.js

(@/Users/niltonxd/Workspace/harv-Harvest-frontend/src/app.css)

{
  "name": "harvest-front",
  "version": "1.7.4",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-solid-svg-icons": "^5.10.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.23",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "antd": "^4.18.7",
    "apexcharts": "^3.19.2",
    "apisauce": "^1.1.0",
    "connected-react-router": "^6.5.2",
    "dotenv": "^10.0.0",
    "formik": "^2.2.9",
    "har-validator": "^5.1.5",
    "history": "4.10.1",
    "js-file-download": "^0.4.9",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21", …

我刚刚升级到webpack 4.我使用css模块.

错误:

./client/src/common/accordian-component/accordian.css中的错误(./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5- 2!./ client/src/common/accordian-component/accordian.css)模块构建失败:TypeError:无法在Object处读取未定义的属性"context".(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:101:57)位于Object的Array.map()处.(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:99:31)位于/ Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/processCss. js:200:3来自上一次活动:在Object.loader(/ Users/phillipjones)的Promise.then(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/cls-bluebird/lib/shimMethod.js:38:20) /Workspace/sl_pathfinder/website/node_modules/postcss-loader/lib/index.js:96:6)@ ./client/src/common/accordian-component/accordian.css 2:14-160 21:1-42: 3 21:158-42:2 22:19-165 @ ./client/src/common/accordian-component/accordian-item.jsx @ ./client/src/common/accordian-component/all-components.js @ ./client/src/common/accordian-component/accordian-component.jsx @ ./client/src/common/index.js @ ./client/src/views/main-view/all-components.js @ ./ client/src/views/main-view/main-view.jsx @ ./client/src/views/index.js @ ./client/src/routes/index.jsx @ ./client/src/App.jsx @ multi ./client/src/App.jsx

webpack.config.js

require('dotenv').config();
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const importPlugin = require('postcss-import');
const postcssFunctions = require('postcss-functions')({
  functions: require('./postcss-functions') }); // eslint-disable-line
// const fs = require('fs');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');

const nodeEnv = process.env.NODE_ENV || …

我现在正在努力让我的Spring Boot App再次运行几天......

我想将我的应用程序部署到Heroku,我得到了一个非常奇怪的错误:

Uncaught Error: Module build failed: TypeError: Invalid PostCSS Plugin found: [0]
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:32:17
at Array.forEach (native)
at plugins (C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:21:15)
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-config\index.js:64:18
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:32:17
at Array.forEach (native)
at plugins (C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:21:15)
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-config\index.js:64:18
at Object.module.exports.createDebug.debug.createDebug.default (http://localhost:8080/vendor.dll.js:94862:7)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.module.exports (http://localhost:8080/vendor.dll.js:112728:15)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.defineProperty.value (http://localhost:8080/vendor.dll.js:94506:84)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.24 (http://localhost:8080/app/main.bundle.js:13268:42)
at __webpack_require__ (http://localhost:8080/app/manifest.bundle.js:694:30)
at fn (http://localhost:8080/app/manifest.bundle.js:115:20)
at Object../src/main/webapp/app/app.module.ts (http://localhost:8080/app/main.bundle.js:3641:1)

我用Google搜索并发现我的绑定可能不正确.所以我执行了

npm rebuild node-sass --force

为了正确设置它们.但这没有帮助.从那以后我收到了这个错误.

我还发现提示它与我的postcss.config.js有关,它是空的(它现在已经工作了6周).所以我添加了一些插件.它现在看起来像这样:

module.exports = {
  parser: require('postcss-scss'),
  plugins: …

我正在尝试在 webpack 中启用 sourceMaps，但 sass-loader 和 postcss-loader 组合似乎存在问题。

启用 sass-loader 和 postcss-loader 后，我的控制台显示“无源”：

但是当我禁用 postcss-loader 时，sourceMap 工作正常并指向“排版”文件：

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist',
        filename: 'js/bundle.js',
    },
    devtool: 'inline-source-map',
    module: {
        rules: [{
                test: /\.css$/i,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader']
                })
            },
            {
                test: /\.scss$/i,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'postcss-loader', …