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.