Jump to content
Sign in to follow this  
mstdmstdd

include in project scss file

Recommended Posts

hello,
In laravel 5.4 I want to make using of include in project scss file and converting them into css files
I googled for some docs how to do it and do :

# lsb_release -d; uname -r; uname -i
Description: Ubuntu 16.04.2 LTS
4.4.0-62-generic
x86_64
# npm -v
4.2.0
# node -v
v7.9.0
# npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN sass-loader@6.0.3 requires a peer of node-sass@^4.0.0 but none was installed.

I do not know if warnings above are critical and if there is a sense to coninue and how top fix it?

 

Next :

# npm run dev
> @ dev /mnt/_work_sdb8/wwwroot/lar/gulp_project
> npm run development

> @ development /mnt/_work_sdb8/wwwroot/lar/gulp_project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
95% emitting
ERROR Failed to compile with 3 errors 5:55:30 PM
error in ./resources/assets/sass/app.scss
Module build failed: Error: Missing binding /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/node-sass/vendor/linux-x64-51/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 7.x
Found bindings for the following environments:
- Windows 64-bit with Node.js 7.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.at module.exports (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/sass-loader/lib/loader.js:3:14)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:13:17)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
@ ./resources/assets/sass/app.scss 4:14-243
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
error in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: Error: Missing binding /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/node-sass/vendor/linux-x64-51/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 7.x
Found bindings for the following environments:
- Windows 64-bit with Node.js 7.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.at module.exports (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/sass-loader/lib/loader.js:3:14)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:13:17)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
at runLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/NormalModule.js:192:19)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:170:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:27:11)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:173:18
at loadLoader (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/loadLoader.js:36:3)
at iteratePitchingLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at runLoaders (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
at NormalModule.doBuild (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/NormalModule.js:179:3)
at NormalModule.build (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/NormalModule.js:268:15)
at Compilation.buildModule (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/Compilation.js:142:10)
at moduleFactory.create (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/Compilation.js:429:9)
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/NormalModuleFactory.js:251:4
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/NormalModuleFactory.js:93:13
at /mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/tapable/lib/Tapable.js:204:11
at NormalModuleFactory.params.normalModuleFactory.plugin (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/tapable/lib/Tapable.js:208:13)
at onDoneResolving (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/NormalModuleFactory.js:68:11)
at onDoneResolving (/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/webpack/lib/NormalModuleFactory.js:197:6)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
error
/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/extract-text-webpack-plugin/loader.js??ref--8-0!/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/style-loader/index.js!/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/css-loader/index.js??ref--8-2!/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/postcss-loader/index.js!/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/resolve-url-loader/index.js!/mnt/_work_sdb8/wwwroot/lar/gulp_project/node_modules/sass-loader/lib/loader.js??ref--8-5!/mnt/_work_sdb8/wwwroot/lar/gulp_project/resources/assets/sass/app.scss doesn't export content

Asset Size Chunks Chunk Names
/js/app.js 1.18 MB 0 [emitted] [big] /js/appmix-manifest.json 32 bytes [emitted]

npm ERR! Linux 4.4.0-62-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "development"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/serge/.npm/_logs/2017-04-29T14_55_30_225Z-debug.log
npm ERR! Linux 4.4.0-62-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'npm run development'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run development
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/serge/.npm/_logs/2017-04-29T14_55_30_246Z-debug.log

and a lot of errors...

2) In my prior php/scss app I run in console :

sass --watch static/scss/default/admin/style.scss:static/css/default/admin/style.css

and it worked ok for me...
I tried to make silmilar:

# sass --watch resources/assets/sass/app.scss : public/css/app.css
>>> Sass is watching for changes. Press Ctrl-C to stop.error No such file or directory @ rb_sysopen -Errno::ENOENT: No such file or directory @ rb_sysopen -
Use --trace for backtrace.

I have file resources/assets/sass/app.scss with content:

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
@import "variables";
// Bootstrap
//@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

.title_message {
color: red;
background-color: crimson;
}
.a_link {
cursor: pointer;
background-color: red;
}
.box-title {
color: navy;
border: 2px dotted green;
}
.table_info {
font-size: smaller;
border: 1px red;
}


Which is the good way of adding scss file to project ?

Thanks! 

Share this post


Link to post
Share on other sites

I still search for decision...

Can you give me a hint : if there is where to download small laravel 5 project with scss files included? Some small snippets...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.