我正在尝试将Tailwind CSS包含在我的WordPress设置中,这意味着我必须使用post-CSS。然而,当我将postpass加载程序添加到此规则时:
{
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']
},