Should Tachyons be in dist/main.css after running yarn build?

I chose Tachyons as the framework when I went through the Sage 9 install.

Ran npm install. Tachyons wasn’t in the node_modules directory. Should it have been?

Then I installed it with yarn add tachyons and ran yarn build.

It’s still not being added to main.css.

In Sage 8 we use Manager. Is there a step or config I’m missing for Sage 9?

It says it’s saved it when I run yarn start:

success Saved 17 new dependencies.
├─ build@0.1.4
├─ cssmin@0.3.2
├─ cycle@1.0.3
├─ eyes@0.1.8
├─ jsmin@1.0.1
├─ jxLoader@0.1.1
├─ makeerror@1.0.11
├─ moo-server@1.3.0
├─ promised-io@0.3.5
├─ stack-trace@0.0.10
├─ tachyons@4.9.1
├─ timespan@2.3.0
├─ tmpl@1.0.4
├─ uglify-js@1.3.5
├─ walker@1.0.7
├─ winston@2.4.0
└─ wrench@1.3.9
Done in 25.48s.

Okay right. Webpack. Some docs

I see that in the resources/assets/build/webpack.config.js file there is a line,

exclude: [/node_modules(?![/|\\](bootstrap|foundation-sites))/],

And that boostrap/ is in node_packages, but not foundation-sites.

I see the following dependencies in package.json:

  "dependencies": {
    "bootstrap": "v4.0.0-beta.2",
    "build": "^0.1.4",
    "font-awesome": "^4.7.0",
    "jquery": "1.12.4 - 3",
    "popper.js": "^1.12.3"
  }

I don’t believe I accidentally selected Bootstrap framework on install. Hmmm.

This is odd. It works fine for me.

I just did a fresh Sage 9 install (composer create-project roots/sage your-theme-name dev-master), selected Tachyons as the CSS framework, and then ran yarn (vs. npm install).

Both tachyons (and tachyons-sass) show up in node_modules. Then, taking a look at main.scss, it imports tachyons-sass via autoload.

For reference, here is resources/assets/styles/main.scss:

@import "common/variables";

/** Import everything from autoload */
@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
// @import "~some-node-module";

/** Import theme styles */
@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

And resources/assets/styles/autoload/_tachyons.scss:

// `sage preset` installed this file automatically.
// Running `sage preset` again could result in automatic deletion of this file.
// Because of this, we do not recommend editing this file.
@import "~tachyons-sass/tachyons";

Then running yarn build works fine as well; I can see Tachyons inside the built css.

Maybe try reinstalling Sage? I don’t know if this would have any bearing on the results, but what version of Composer, Node.js, and Yarn are you using?

1 Like

Thanks. I reinstalled Sage and it worked this time. Maybe I accidentally selected Bootstrap.

Do you know if it’s in webpack.config.js that I would work to send some of the js and css to a separate file for hardcoding into the header?