Webpack CSS loader not configured

[HarryFrancis]

I have been working with Slater for a few months with few problems, but today on an existing project when running npm run start I get an error about my css file:

Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* External */
> @import 'tippy.js/dist/tippy';
| 
| /* Global */
  @ ./src/scripts/index.js 1:0-28

From my research webpack hasn't got a css loader setup, but this was working before & I've not updated slater so I'm wondering how I managed to do this!

Any advice?

[HarryFrancis]

I've been trying some debugging, and everything runs okay when using slater watch, but not when I use npm run start which is just an alias for slater build && slater watch.

Those commands work fine on their own, am I missing something here?

[HarryFrancis]

I have just tried again and non of the commands are working.

Anyone have any light to shed here?

[jack-pallot]

This is what the scripts look like in my package.json file:

"start": "slater watch",
"build": "slater build",
"deploy:development": "slater build && slater sync",
"deploy:production": "slater build && slater sync --theme production"

I don't think you need to build before running the watch command.

You might be missing dependencies. You could try removing your node_modules folder and reinstalling, or failing that manually adding the dev dependencies in yourself (npm install postcss-loader should do it).

[sampsonpete]

I’m also seeing the same issue. For me, running yarn start works as expected but slater watch gives the error about missing css-loaders.

yarn start is just an alias for slater watch so I’m not sure what the difference is!

[jack-pallot]

Do you have Slater in your package.json and node_modules directory as well as installed globally?

[HarryFrancis]

Hmm! Mine seems to work sometimes, but not consistently. I think it's to do with Slater commands running your globally installed Slater, but yarn (npm in my case) running the project installed Slater. I've just noticed jack's reply which sounds similar. I have got Slater installed on both, but I just went back to time machine and got an older version of the global Slater package and manually copies it into my global node_modules and the command started working... It is the same version and I had reinstalled it so it was definitely unedited. I'm so confused!

…

On Wed, 7 Oct 2020, 17:53 Peter Sampson, ***@***.***> wrote: I’m also seeing the same issue. For me, running yarn start works as expected but slater watch gives the error about missing css-loaders. yarn start is just an alias for slater watch so I’m not sure what the difference is! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#107 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABUFPWWRTVQO43MPHUPTX5TSJSMJJANCNFSM4QJIKFXQ> .

[sampsonpete]

Ok, it looks like my local (v1.6.1-2) and global (v1.8.0) versions of Slater are indeed different. Yarn/npm is using the local version and slater commands use the global version as you say.

I tried making them both use the same version but now I get the error all the time!

A new project created by running slater init adds slater v1.8.0 to the package.json but I can see that installing slater@tailwind and @slater/compiler@tailwind as per this comment downgrades it to v1.6.1-2 so I’m wondering if it’s something to do with adding Tailwind.

Do you also have Tailwind set up on your project @HarryFrancis?

[HarryFrancis]

Yes. And the project I am using vanilla Slater, it's working fine, so that might be the case!

…

On Wed, 7 Oct 2020, 19:08 Peter Sampson, ***@***.***> wrote: Ok, it looks like my local (v1.6.1-2) and global (v1.8.0) versions of Slater are indeed different. Yarn/npm is using the local version and slater commands use the global version as you say. I tried making them both use the same version but now I get the error all the time! A new project created by running slater init adds slater v1.8.0 to the package.json but I can see that installing ***@***.*** and @***@***.*** as per this comment <#32 (comment)> downgrades it to v1.6.1-2 so I’m wondering if it’s something to do with adding Tailwind. Do you also have Tailwind set up on your project @HarryFrancis <https://github.com/HarryFrancis>? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#107 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABUFPWVAFJIKJ6NZXASUEOTSJSVAZANCNFSM4QJIKFXQ> .

[sampsonpete]

Ok, cool. I’ll have a closer look into that other thread tomorrow and see if I can figure it out. I’m a big fan of Tailwind but I’ve never used it with Slater before so I hope it’s possible to get them to work together without issues.

[HarryFrancis]

I've definitely had it working before. Something must have changed in an update that caused this, although Slater hasn't been updated in a while so not sure what it could be! PS sorry for the short replied I'm on my phone!

…

On Wed, 7 Oct 2020, 19:50 Peter Sampson, ***@***.***> wrote: Ok, cool. I’ll have a closer look into that other thread tomorrow and see if I can figure it out. I’m a big fan of Tailwind but I’ve never used it with Slater before so I hope it’s possible to get them to work together without issues. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#107 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABUFPWXULJEGNZZMTU2IDM3SJSZ6RANCNFSM4QJIKFXQ> .

[jack-pallot]

Using npm run is the better method since it uses the locally installed version of the package. If you work in a team, global packages can cause issues if someone else has a different version installed than you do. It also means you can replicate the build process in a CI pipeline like Github Actions or Circle CI.

I have Tailwind working on my latest project and it works with both the slater watch and npm run start commands. I work on this project on two different machines and it hasn't been an issue so far. It did take me a while to get it working though, I ended up settling for a slightly unorthodox way of including it.

What you could do is double check you're running on the latest globally and locally. It's sometimes the case that npm just doesn't update the version correctly.

npm i slater@latest -g
npm list -g --depth 0

[sampsonpete]

Ok, I’ve figured out the latest version of Slater (v1.8.0) is not compatible with the Tailwind compiler recommended by @estrattonbailey here.

The occasional differences were indeed caused by the local version using v1.6.1-2 vs the globally installed v1.8.0.

After upgrading both local and global versions of Slater to v1.8.0 I always receive the error.

Running npm i slater@tailwind @slater/compiler@tailwind --save-dev again downgrades the local version of Slater to v1.6.1-2. Running npm run start works again without the error.

[jack-pallot]

It's likely that the Tailwind compiler has a dependency on Slater 1.6 and hasn't been updated. Like I mentioned, I didn't install Tailwind using this method because I couldn't get it to work.

What I do instead is place the entire preset in an external file and require it in my slater.config.js file (here's a Gist of that file). This is similar to the method n-kort describes here. Then install all of the packages required to make everything work manually.

const path = require('path')
const tailwindPreset = require('./webpack-tailwind-preset')

module.exports = {
  themes: {
  },
  assets: {
    presets: [tailwindPreset],
  },
}

  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "css-loader": "^4.3.0",
    "cssnano": "^4.1.10",
    "mini-css-extract-plugin": "^0.11.2",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^4.0.1",
    "postcss-nested": "^4.2.3",
    "postcss-preset-env": "^6.7.0",
    "slater": "^1.8.0"
  },
  "dependencies": {
    "tailwindcss": "^1.8.10"
  }

[sampsonpete]

I’d tried to set it up how n-kort describes but couldn’t get it to work. I’ve now got it working with your method so thanks for your help @jack-pallot.

[jack-pallot]

Do you have the CLI working with both commands now too?

[sampsonpete]

Yes. Both npm run start and slater watch are working without errors now.

[ShaneRostad]

Currently using this setup @jack-pallot but having a weird issue where tailwind is failing to generate all of the base css classes. For example, the only positioning styles are top-0 'right-0 bottom-0 left-0 inset-0` but every other size (right-1, right-2, right-3, etc....) is missing.

Not sure if this is a tailwind issue or I'm missing a configuration step here.

here's my package.json file:

``` { "name": "@slater/theme", "version": "1.8.0", "scripts": { "start": "slater watch", "build": "slater build", "deploy:development": "slater build && slater sync", "deploy:production": "slater build && slater sync --theme production", "test:start": "slater watch --config test.config.js", "test:build": "slater build --config test.config.js", "test:deploy": "slater build --config test.config.js && slater sync --config test.config.js", "test:deploy:production": "slater build --config test.config.js && slater sync --theme production --config test.config.js" }, "author": "https://thecouch.nyc", "license": "MIT", "homepage": "https://github.com/the-couch/slater#readme", "devDependencies": { "autoprefixer": "^10.0.2", "css-loader": "^4.3.0", "cssnano": "^4.1.10", "mini-css-extract-plugin": "^0.11.2", "optimize-css-assets-webpack-plugin": "^5.0.4", "postcss-import": "^12.0.1", "postcss-loader": "^4.0.1", "postcss-nested": "^4.2.3", "postcss-preset-env": "^6.7.0", "slater": "^1.8.0" }, "dependencies": { "choozy": "0.0.3", "lazim": "^1.0.0", "mitt": "^1.1.3", "operator": "^1.4.0", "picoapp": "^3.1.3", "sliced": "^1.0.1", "tailwindcss": "^1.8.10", "unfetch": "^4.1.0" }, "gitHead": "5068db0b2661b5e4a94a7a439e5919c4cc13c837" } ```

Here's my tailwind config file

``` module.exports = { darkMode: false, // or 'media' or 'class' purge: { enabled: false, }, theme: { boxShadow: { '3xl': '0 21px 50px 20px rgb(0 0 0 / 64%)', }, colors: { red: '#ED1C24', 'light-gray': '#CCCCCC', 'dark-red': '#150404', 'dark-gray': '#0D0D0D', transparent: 'transparent', current: 'currentColor', black: 'black', white: 'white', gray: '#B3B3B3', } }, variants: { extend: {}, }, plugins: [], } ```

here's my /main.css

``` @import 'global/var.css'; @import 'global/colors.css'; @import 'global/typography.css'; @import 'global/global.css'; @import 'global/lists.css'; @import 'global/forms.css'; @import 'global/containers.css';

    @import 'components/buttons.css';
    @import 'components/image.css';
    @import 'components/counter.css';
    
    @import 'templates/collection.css';
    
    @import 'slater/code.css';
    @import 'slater/typography.css';
    @import 'slater/header.css';
    @import 'slater/footer.css';
    @import 'slater/welcome.css';
    @import 'slater/accounts.css';
    @import 'slater/product.css';
    @import 'slater/cart-drawer.css';
    @import 'slater/inputs.css';
    
    @import 'styles.css'; 
    @import 'form-reset.css';

    styles.css contains the following:
    
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

</details>

[jack-pallot]

@ShaneRostad

Could you trying using the default 1.8 config file for now? There's a copy here.

Then if you could run slater watch and dump a copy of the tailwind CSS file in a gist or pastebin, it should give me a better idea of what's being generated.