Webpack postcss-loader 导致 sass 错误

问题描述

我正在尝试在我的 wordpress 设置中包含 Tailwind CSS，这意味着我必须使用 post CSS。但是，当我将 postcss-loader 添加到此规则时：

{
        test: /\.(sass|scss)$/,use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']
},

我返回以下错误：

[./src/sass/style.scss] 1.37 KiB {frontend} [built] [Failed] [1 error]

ERROR in ./src/sass/style.scss
Module build Failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build Failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...m\\[focus-within": expected selector,was "]\\:sr-only[focus-wi"
        on line 35881 of /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss
>>   .sm\[focus-within]\:sr-only[focus-within] {

   --^

    at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/webpack/lib/normalModule.js:316:20
    at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.callback (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/sass-loader/dist/index.js:73:7)
    at Object.done [as callback] (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/neo-async/async.js:8069:18)
    at options.error (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/node-sass/lib/index.js:294:32)
 @ multi ./src/index.js ./src/sass/style.scss frontend[1]
Child mini-css-extract-plugin ../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/css-loader/dist/cjs.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/sass-loader/dist/cjs.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/postcss-loader/src/index.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./src/sass/style.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src!./src/sass/style.scss 368 bytes {mini-css-extract-plugin} [built] [Failed] [1 error]
    
    ERROR in ./src/sass/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src!./src/sass/style.scss)
    Module build Failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Invalid CSS after "...m\\[focus-within": expected selector,was "]\\:sr-only[focus-wi"
            on line 35881 of /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss
    >>   .sm\[focus-within]\:sr-only[focus-within] {
    
       --^

我尝试了许多不同的方法，但似乎都没有奏效。不确定我是否误解了某些东西，因为我发现的大部分材料都是针对 React 设置的。

解决方法

通过将加载程序的顺序更改为以下内容，设法解决了该问题：

      {
        test: /\.(sass|scss)$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-sass-loader','sass-loader']
      },

postcss-loader sass sass tailwind-css webpack webpack webpack