Jump to content

include in project scss file

mstdmstdd

By mstdmstdd
in Frameworks

 Share

Recommended Posts

mstdmstdd Advanced Member

mstdmstdd

Posted
Posted

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! 

Link to comment
https://forums.phpfreaks.com/topic/303831-include-in-project-scss-file/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.