Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for Tailwind CSS #3

Open
jorgeuos opened this issue Aug 10, 2023 · 4 comments
Open

Support for Tailwind CSS #3

jorgeuos opened this issue Aug 10, 2023 · 4 comments

Comments

@jorgeuos
Copy link

First of all!

Really COOL boilerplate for getting started with Chrome extension development.

I was struggling with getting chrome as a global variable. And ChatGPT just gave me a headache with it's hallucinations.

Your repo, on the other hand, is looking really promising! Thank you!

Now to my issue:

Everything was working as expected until I tried to add TailwindCSS and got this error.

npm run start

> [email protected] start
> webpack --watch --config webpack.dev.cjs

Failed to load ./.env.
assets by path icons/ 35.8 KiB
  assets by path icons/*.png 16.5 KiB 10 assets
  assets by path icons/*.svg 13.2 KiB 3 assets
  asset icons/.DS_Store 6 KiB [compared for emit] [from: static/icons/.DS_Store] [copied]
assets by path *.js 142 KiB
  asset serviceWorker.js 126 KiB [compared for emit] (name: serviceWorker)
  asset options.js 10.7 KiB [emitted] (name: options)
  asset popup.js 5.08 KiB [compared for emit] (name: popup)
  asset contentScript.js 196 bytes [compared for emit] (name: contentScript)
assets by path *.html 1.42 KiB
  asset popup.html 836 bytes [compared for emit] [from: static/popup.html] [copied]
  asset options.html 614 bytes [emitted] [from: static/options.html] [copied]
asset styles/popup.css 19.1 KiB [compared for emit] (name: popup)
asset manifest.json 1.03 KiB [compared for emit] [from: static/manifest.json] [copied]
Entrypoint serviceWorker 126 KiB = serviceWorker.js
Entrypoint contentScript 196 bytes = contentScript.js
Entrypoint popup 24.1 KiB = styles/popup.css 19.1 KiB popup.js 5.08 KiB
Entrypoint options 10.7 KiB = options.js
runtime modules 3.19 KiB 13 modules
orphan modules 19.8 KiB [orphan] 5 modules
javascript modules 44.9 KiB
  modules by path ./node_modules/@babel/runtime/ 18.4 KiB 13 modules
  modules by path ./src/*.ts 26.5 KiB
    ./src/serviceWorker.ts 6.35 KiB [built] [code generated]
    ./src/contentScript.ts 1 bytes [built] [code generated]
    + 4 modules
  modules by path ./styles/*.scss 89 bytes
    ./styles/popup.scss 50 bytes [built] [code generated]
    ./styles/options.scss 39 bytes [built] [code generated] [1 error]
css modules 6.32 KiB
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/popup.scss 334 bytes [built] [code generated]

WARNING in [eslint] 
/private/var/www/jorgeuos/chrome-check-analytics/src/mtmoChecker.ts
  177:9  warning  'matomoFound' is assigned a value but never used  @typescript-eslint/no-unused-vars

/private/var/www/jorgeuos/chrome-check-analytics/src/serviceWorker.ts
  21:16  warning  'getCurrentTab' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

ERROR in ./styles/options.scss (./styles/options.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/options.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^

  styles/options.scss 1:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.loader (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/index.js:69:14)
 @ ./styles/options.scss
 @ ./src/options.ts 1:0-32

ERROR in ./styles/options.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^

  styles/options.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5001:43
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3482:9)
    at timesSync (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.<anonymous> (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss:1:7)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:439:10
    at Hook.eval [as call] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5068:39
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)

Generated code for /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"tailwindcss/base\";\n  │         ^^^^^^^^^^^^^^^^^^\n  ╵\n  styles/options.scss 1:9  root stylesheet");
 @ ./src/options.ts 1:0-32

webpack 5.83.1 compiled with 2 errors and 1 warning in 3403 ms
^C
(⎈|N/A:N/A) MY_ACCOUNT_NAME  /p/v/w/j/chrome-check-analytics   main ±  git remote -v
origin  [email protected]:sszczep/chrome-extension-webpack.git (fetch)
origin  [email protected]:sszczep/chrome-extension-webpack.git (push)
(⎈|N/A:N/A) MY_ACCOUNT_NAME  /p/v/w/j/chrome-check-analytics   main ±  npm run start

> [email protected] start
> webpack --watch --config webpack.dev.cjs

Failed to load ./.env.
assets by path icons/ 35.8 KiB
  assets by path icons/*.png 16.5 KiB 10 assets
  assets by path icons/*.svg 13.2 KiB 3 assets
  asset icons/.DS_Store 6 KiB [compared for emit] [from: static/icons/.DS_Store] [copied]
assets by path *.js 142 KiB
  asset serviceWorker.js 126 KiB [emitted] [compared for emit] (name: serviceWorker)
  asset options.js 10.7 KiB [compared for emit] (name: options)
  asset popup.js 5.08 KiB [compared for emit] (name: popup)
  asset contentScript.js 196 bytes [compared for emit] (name: contentScript)
assets by path *.html 1.42 KiB
  asset popup.html 836 bytes [compared for emit] [from: static/popup.html] [copied]
  asset options.html 614 bytes [compared for emit] [from: static/options.html] [copied]
asset styles/popup.css 19.1 KiB [compared for emit] (name: popup)
asset manifest.json 1.03 KiB [compared for emit] [from: static/manifest.json] [copied]
Entrypoint serviceWorker 126 KiB = serviceWorker.js
Entrypoint contentScript 196 bytes = contentScript.js
Entrypoint popup 24.1 KiB = styles/popup.css 19.1 KiB popup.js 5.08 KiB
Entrypoint options 10.7 KiB = options.js
runtime modules 3.19 KiB 13 modules
orphan modules 19.8 KiB [orphan] 5 modules
javascript modules 44.9 KiB
  modules by path ./node_modules/@babel/runtime/ 18.4 KiB 13 modules
  modules by path ./src/*.ts 26.5 KiB
    ./src/serviceWorker.ts 6.35 KiB [built] [code generated]
    ./src/contentScript.ts 1 bytes [built] [code generated]
    + 4 modules
  modules by path ./styles/*.scss 89 bytes
    ./styles/popup.scss 50 bytes [built] [code generated]
    ./styles/options.scss 39 bytes [built] [code generated] [1 error]
css modules 6.32 KiB
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/popup.scss 334 bytes [built] [code generated]

WARNING in [eslint] 
/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/mtmoChecker.ts
  178:9  warning  'matomoFound' is assigned a value but never used  @typescript-eslint/no-unused-vars

/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/serviceWorker.ts
  21:16  warning  'getCurrentTab' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)


ERROR in ./styles/options.scss (./styles/options.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/options.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^

  styles/options.scss 1:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.loader (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/index.js:69:14)
 @ ./styles/options.scss
 @ ./src/options.ts 1:0-32

ERROR in ./styles/options.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^

  styles/options.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5001:43
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3482:9)
    at timesSync (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.<anonymous> (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss:1:7)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:439:10
    at Hook.eval [as call] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5068:39
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)

Generated code for /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"tailwindcss/base\";\n  │         ^^^^^^^^^^^^^^^^^^\n  ╵\n  styles/options.scss 1:9  root stylesheet");
 @ ./src/options.ts 1:0-32

webpack 5.83.1 compiled with 2 errors and 1 warning in 3550 ms
assets by status 200 KiB [cached] 22 assets
Entrypoint serviceWorker 126 KiB = serviceWorker.js
Entrypoint contentScript 196 bytes = contentScript.js
Entrypoint popup 24.1 KiB = styles/popup.css 19.1 KiB popup.js 5.08 KiB
Entrypoint options 10.7 KiB = options.js
cached modules 62.9 KiB (javascript) 3.19 KiB (runtime) [cached] 35 modules
orphan modules 1.72 KiB [orphan] 2 modules
cacheable modules 89 bytes (javascript) 6.32 KiB (css/mini-extract)
  javascript modules 89 bytes
    ./styles/popup.scss 50 bytes [built]
    ./styles/options.scss 39 bytes [built] [1 error]
  css modules 6.32 KiB
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/popup.scss 334 bytes [built]

WARNING in [eslint] 
/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/mtmoChecker.ts
  178:9  warning  'matomoFound' is assigned a value but never used  @typescript-eslint/no-unused-vars

/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/serviceWorker.ts
  21:16  warning  'getCurrentTab' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)


ERROR in ./styles/options.scss (./styles/options.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/options.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^

  styles/options.scss 1:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.loader (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/index.js:69:14)
 @ ./styles/options.scss
 @ ./src/options.ts 1:0-32

ERROR in ./styles/options.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^

  styles/options.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/Hook.js:18:14)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5001:43
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.<anonymous> (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss:1:7)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:439:10
    at Hook.eval [as call] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/Hook.js:14:14)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5068:39
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)

Generated code for /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"tailwindcss/base\";\n  │         ^^^^^^^^^^^^^^^^^^\n  ╵\n  styles/options.scss 1:9  root stylesheet");
 @ ./src/options.ts 1:0-32

webpack 5.83.1 compiled with 2 errors and 1 warning in 120 ms
^C
(⎈|N/A:N/A) MY_ACCOUNT_NAME  /p/v/w/j/chrome-check-analytics   main ±  npm run build

> [email protected] build
> webpack --config webpack.prod.cjs

Failed to load ./.env.
assets by status 66.6 KiB [cached] 22 assets
Entrypoint serviceWorker = serviceWorker.js 1 auxiliary asset
Entrypoint contentScript = contentScript.js
Entrypoint popup = styles/popup.css popup.js 2 auxiliary assets
Entrypoint options = options.js 1 auxiliary asset
orphan modules 43.4 KiB (javascript) 997 bytes (runtime) [orphan] 22 modules
runtime modules 1.4 KiB 6 modules
cacheable modules 44.9 KiB (javascript) 6.25 KiB (css/mini-extract)
  javascript modules 44.9 KiB
    modules by path ./src/*.ts 30.3 KiB
      ./src/serviceWorker.ts + 12 modules 30.1 KiB [built] [code generated]
      + 3 modules
    modules by path ./node_modules/@babel/runtime/ 14.6 KiB
      ./node_modules/@babel/runtime/regenerator/index.js 448 bytes [built] [code generated]
      ./node_modules/@babel/runtime/helpers/regeneratorRuntime.js 13.6 KiB [built] [code generated]
      ./node_modules/@babel/runtime/helpers/typeof.js 555 bytes [built] [code generated]
    ./styles/options.scss 39 bytes [built] [code generated] [1 error]
  css modules 6.25 KiB
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/popup.scss 262 bytes [built] [code generated]

WARNING in [eslint] 
/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/mtmoChecker.ts
  178:9  warning  'matomoFound' is assigned a value but never used  @typescript-eslint/no-unused-vars

/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/serviceWorker.ts
  21:16  warning  'getCurrentTab' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)


ERROR in ./styles/options.scss (./styles/options.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/options.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^

  styles/options.scss 1:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.loader (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/index.js:69:14)
 @ ./styles/options.scss
 @ ./src/options.ts 1:0-32

ERROR in ./styles/options.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^

  styles/options.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5001:43
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3482:9)
    at timesSync (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.<anonymous> (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss:1:7)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:439:10
    at Hook.eval [as call] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5068:39
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)

Generated code for /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"tailwindcss/base\";\n  │         ^^^^^^^^^^^^^^^^^^\n  ╵\n  styles/options.scss 1:9  root stylesheet");
 @ ./src/options.ts 1:0-32

Do you have any clue on how to fix the issue. I'll continue debugging tomorrow.

@sszczep
Copy link
Owner

sszczep commented Aug 10, 2023

Hey, thanks for reaching out.

Could you provide a minimal reproducible example? Some temporary git repository would be great.

@jorgeuos
Copy link
Author

Sure!

I just installed everything:

git clone [email protected]:sszczep/chrome-extension-webpack.git
cd chrome-extension-webpack
npm install
npm run start
# Stop obviosly: ctrl+c
npm install -D postcss-import
npm run start

But sure, I haven't even created a new repo yet. But I will if you want me to.

Regards, Jorge

@jorgeuos
Copy link
Author

Hi again!

I got it to work!

I feel really stupid now, but mainly I just followed a TailwindCSS guide and generated the default tailwind.config.js file and I added a postcss.config.js file aswell.

Renaming the extension of these files to .cjs seems to fix the issue.

I also tried different things before I got it to work.

But I made a fork of your repo, you can check it out if you want. I can even create a PR if you'd like that. But perhaps TailwindCSS should be optional. Perhaps something I can fix over the weekend or something.

Here's the diff.

@jorgeuos
Copy link
Author

Oh, and here is a detailed doc of My tweaks to make TailwindCSS work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants