I just can't get Lost working

help
1

I installed juliancwirko:postcss package.
Removed standard-minifier-css.
Installed Lost with npm install --save-dev lost.

And my package.json is this:

{
  "name": "app",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "lost": "^6.7.2"
  },
  "dependencies": {
    "meteor-node-stubs": "~0.2.0",
    "postcss": {
      "plugins": {
        "postcss-easy-import": {},
        "postcss-nested": {},
        "postcss-simple-vars": {},
        "rucksack-css": {},
        "lost": {},
        "autoprefixer": {
          "browsers": [
            "last 2 versions"
          ]
        }
      }
    },
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-komposer": "^1.8.0",
    "react-mounter": "^1.2.0"
  }
}

In the client folder my css file is this:

.lost-test {
  lost-column: 1/3;
  background: black;
}

section {
  height: 100%;
}

In the React component, related HTML section is this:

  <section>
    <div className="lost-test">1</div>
    <div>2</div>
  </section>

What I was expecting: A piece of column, not the entire row, in black.
What I got: Entire row in black.

What am I doing wrong?

2

This should be one level up not in the dependencies key, also you don’t need to use all PostCSS plugins listed here to use only Lost. You can just leave lost and autoprefixer. Lost is used in the demo here too: GitHub - juliancwirko/meteor-postcss-test: Test project with Meteor PostCSS package

3

I was just wondering how those plugins got there (I didn’t install them) but I think they came there because I just copied and pasted that section from your example (the one you gave the link) after failing to run Lost. The weird part is that I did npm install and npm update many many times and restarted the app many many times and Meteor didn’t say anything about that.

Anyway, now everything is working. Thanks a lot! You’ve been very helpful Julian :slight_smile: