HomeQuestionBlogAboutMessageToolbox
English

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

Winter2021-01-28

在nuxt项目中引入tailwindcss后，build正式包时报错

ERROR in ./assets/scss/tailwind.scss
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Expected an opening square bracket.
    at /Users/yld/Documents/work/git/viawallet_developer_frontend/assets/scss/tailwind.scss:1:37
    at Root._error (/Users/yld/Documents/work/git/viawallet_developer_frontend/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:137:24)
    at Root.error (/Users/yld/Documents/work/git/viawallet_developer_frontend/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/root.js:43:25)
    at Parser.error (/Users/yld/Documents/work/git/viawallet_developer_frontend/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:392:25)
    at Parser.expected (/Users/yld/Documents/work/git/viawallet_developer_frontend/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:685:25)
Winter2021/01/28 16:52:20

在你的nuxt.config.js配置禁用focus-within-pseudo-class功能就可以解决这个问题

build: {
    postcss: {
      preset: {
        features: {
          // Fixes: https://github.com/tailwindcss/tailwindcss/issues/1190#issuecomment-546621554
          "focus-within-pseudo-class": false
        }
      }
    }
  }

 

相关问题还可访问https://github.com/nuxt-community/tailwindcss-module/issues/79#issuecomment-609693459

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标
5 Answer
如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)
25 Answer
MAC终端删除代理有效命令
1 Answer
vue动态路由跳转同一地址不刷新页面
0 Answer
NUXT引入tailwindcss报错Error: Expected an opening square bracket.
1 Answer

LINKS

QuestionBlogMessageToolbox