账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    用了 mini-css-extract-plugin 之后postcss 不能加后缀
    50
    0
    {
            test: /\.(sass|scss)$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: "../"
                }
              },
              "css-loader",
              "postcss-loader",
              "sass-loader"
            ]
          },
          
          
        // postcss.config.js
         module.exports = {
      plugins: [
        require("autoprefixer"),
        // reuqire('postcss-import')
      ]
    
    new MiniCssExtractPlugin({
          filename: "css/[name].[hash:6].css",
          // chunkFilename: "css/[name].[hash:6].css",
    
        }),
    }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • Mini CSS Extract Plugin 是一个用于在 CSS 中提取可访问 CSS 的预处理器插件。如果使用 Mini CSS Extract Plugin 之后,你仍然无法在 PostCSS 中添加后缀,可能有以下几种原因:

      1. postcss-plugin-minicss-extract 是一个只适用于提取 CSS 属性和注释的插件,而不仅仅是提取纯 CSS。在 PostCSS 中,你需要使用 postcss-scss-merge-attributespostcss-scss-merge-eol 这些插件来合并和处理提取到的 CSS 属性和注释。

      例如,假设你有一个包含以下 CSS 的文件: ```css @import 'styles.css';

      body { background-color: #f0f0f0; color: #333; font-family: Arial, sans-serif; }

      p { color: #333; } ```

      如果你使用 postcss-plugin-minicss-extract 进行提取,你可能需要以下配置: ```css postcss-config.js { plugins: [ require('postcss-scss-merge-attributes'), require('postcss-scss-merge-eol'), ], }

      postcss { plugins: [ require('postcss-scss-merge-attributes'), require('postcss-scss-merge-eol'), ], } ```

      如果你使用 postcss-plugin-minicss-extract 进行提取,但是你的后缀仍然不能添加,可能是以下原因:

      1. 你可能没有正确地添加 minicss-extract-plugin 到你的 PostCSS 编辑器中。在 PostCSS 中,你可以通过以下步骤添加插件: javascript npm install postcss-plugin-minicss-extract --save-dev

      2. 你可能在后缀的前缀(例如 .css)后加上了转义字符,例如 "。转义字符在 PostCSS 中是 \",可能会导致插件无法识别并提取可访问 CSS。你可能需要将转义字符从 .css 后面移除,例如: ```javascript postcss-config.js { plugins: [ require('postcss-scss-merge-attributes'), require('postcss-scss-merge-eol'), ], postcss-options: { map: { '.css': 'inline-style', }, }, }

      postcss { plugins: [ require('postcss-scss-merge-attributes'), require('postcss-scss-merge-eol'), ], postcss-options: { map: { '.css': 'inline-style', }, }, } ```

      1. 你可能在你的项目根目录中引入了 postcss-plugin-minicss-extract 插件,但没有正确地在你的 CSS 文件中引入它。你可以在你的 CSS 文件中使用以下样式引入插件: ```css @import 'mini-css-extract-plugin.min.css';

      body { background-color: #f0f0f0; color: #333; font-family: Arial, sans-serif; }

      p { color: #333; } ```

      通过调整这些配置和后缀的前缀,你应该能够成功添加可访问 CSS 的后缀到你的 PostCSS 文件中。如果你仍然无法添加后缀,可能需要检查你的项目设置、PostCSS 插件版本或插件的文档,以确定问题所在。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部