mZoo
January 12, 2018, 1:30am
1
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?
mZoo
January 12, 2018, 2:19am
2
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
mZoo
January 13, 2018, 2:34am
4
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?