titon / toolkit

User interface components built on React.

Home Page:http://titon.io/toolkit

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

v3 failed to compile file "toasts.scss"

PauloFrancaLacerda opened this issue · comments

Hello.
Just discouvered Titon and found it awesome!

I tried to compile that full scss in the "\testing" folder.
I'm running latest Sass v3.4.21 on Windows 7 through Ruby.
P.S.: I renamed the main scss to "titon-full.SCSS".

If I comment out the import of file "toasts.scss", everything goes fine. Otherwise, I got this error (after lots of warnings):

src/components/toast.scss:12:in @content: Invalid CSS after "": expected selector, was "" (Sass::SyntaxError)
        from src/styles/helpers/mixins.scss:25:in export
        from src/components/toast.scss:8
        from .\src\titon-full.SCSS:48

Hey Paulo,

How are you building the CSS? You can run npm run build:css which will compile the CSS file to the build/ folder. Be sure you ran npm install first. I use node-sass for compilation instead of Ruby, so it may work slightly differently.

I'd also like to note that v3 of Titon is heavily in development, so some features are most definitely broken or not finished.

Thank, @milesj , for the rapid response.
Well, as I mentioned, I run on Windows 7, so there's no "npm" or "node-sass", just a batch file made by Ruby installer, as follows (where "......." is my local path to Ruby):

File: "SASS.BAT":

IF NOT "%~f0" == "~f0" GOTO :WinNT
".......\Ruby\bin\ruby.exe" "......./Ruby/bin/sass" %1 %2 %3 %4 %5 %6 %7 %8 %9
GOTO :EOF
:WinNT
".......\Ruby\bin\ruby.exe" "%~dpn0" %*

So I call that batch with the following parameters:

sass.bat --scss -t expanded titon-full.scss

Ruby is just the mediator, on Windows, to the Sass compiler.

I'd also like to note that v3 of Titon is heavily in development, so some features are most definitely broken or not finished.

I understand. :)

NPM and Node are available for Windows, as seen here: https://nodejs.org/dist/v5.10.1/node-v5.10.1-x64.msi

Here's the output of npm run build on my W10 machine.

D:\Web\toolkit>node --version
v5.9.0

D:\Web\toolkit>npm --version
3.7.3

D:\Web\toolkit>npm update
titon-toolkit@2.1.7 D:\Web\toolkit
+-- autoprefixer@6.3.6
+-- babel-core@6.7.6
+-- eslint-plugin-sorting@0.0.1
+-- UNMET PEER DEPENDENCY react@15.0.0-rc.2
+-- react-addons-test-utils@15.0.0-rc.2
`-- react-dom@15.0.0-rc.2

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11
npm WARN enzyme@2.1.0 requires a peer of react@0.13.x || 0.14.x || 15.* || 15.0.0-rc.1 but none was installed.

D:\Web\toolkit>npm run build

> titon-toolkit@2.1.7 build D:\Web\toolkit
> npm run build:js && npm run build:css


> titon-toolkit@2.1.7 build:js D:\Web\toolkit
> npm run js


> titon-toolkit@2.1.7 js D:\Web\toolkit
> browserify -t [ babelify --presets [ es2015 react stage-1 ] --plugins [ transform-decorators-legacy ] ] -t [ envify --NODE_ENV development ] ./src/testing/app.js > ./build/titon.js


> titon-toolkit@2.1.7 build:css D:\Web\toolkit
> npm run css && npm run css:prefix


> titon-toolkit@2.1.7 css D:\Web\toolkit
> node-sass --indent-width 4 --output-style expanded --source-map ./build --importer ./build/tasks/import-scss-index.js ./src/testing/style.scss ./build/titon.css

Rendering Complete, saving .css file...
Wrote Source Map to D:\Web\toolkit\build\titon.css.map
Wrote CSS to D:\Web\toolkit\build\titon.css

> titon-toolkit@2.1.7 css:prefix D:\Web\toolkit
> postcss --use autoprefixer --config ./.postcss.json --output ./build/titon.css ./build/titon.css

If you feel like giving that a shot ;)

Thanks for the advice.
I'll give it a try when I have the chance.

Did you get this working?

I updated the NPM deps and build process, so should work better now.

b7b5801