Related
I am using Webpack with Babel, and #babel/preset-env to hopefully import only required polyfills that I need. It seems though that the entire library is being installed, resulting in a large bundle (~250kb)
My package.js:
{
"name": "holidaynewtheme",
"version": "0.1",
"description": "Starter theme for holidaynewbase",
"private": true,
"main": "webpack.config.js",
"dependencies": {
"core-js": "^3.6.5",
"element-closest": "^3.0.2",
"flickity": "^2.2.1",
"gsap": "^3.4.2",
"js-cookie": "^2.2.1",
"turbolinks": "^5.2.0",
"vanilla-lazyload": "^17.1.0",
"whatwg-fetch": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.11.0",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#shopify/theme-cart": "^3.0.3",
"#shopify/theme-product": "^3.0.3",
"#shopify/theme-product-form": "^3.0.3",
"#shopify/themekit": "^1.1.3",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"bluebird": "^3.5.3",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^3.0.1",
"glob": "^7.1.6",
"html-includes": "^4.3.3",
"mini-css-extract-plugin": "^0.9.0",
"modernizr": "^3.6.0",
"modernizr-loader": "^1.0.1",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"sass-loader": "^8.0.2",
"svg-symbols": "^1.0.5",
"url-loader": "^1.1.2",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-shell-plugin-next": "^1.1.5"
},
"browserslist": [
"last 1 version",
"> 2%",
"Explorer >= 11"
]
}
My babel.config.json:
{
"presets": [
[
"#babel/preset-env",
{
useBuiltIns: "entry",
debug: true,
corejs: "3.6.4"
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
I have the following imports set up in my main entry point:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
I'm using the BundleAnalyzerPlugin and get a gzipped size of 250kb for just core-js:
When I change the browserslist setup to be just Chrome 85, nothing form core-js is imported.
When I remove the import line, nothing is imported either.
OK, feeling foolish.
My webpack.config.js had this configuration for babel-loader:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/env'],
}
},
... I'm not that au faix with webpack setup, so I think this was overriding my babel.config.json for anything .js.
Also, I removed the import lines, and changed useBuiltIns to be usage and everything works as expected.
The giveaway should have been that my debug: true was not causing debug info to be logged when webpack was compiling. It is now, and my bundle is much smaller.
I recently upgraded to node 6, angular 4, typescript 2.3.2 and #angular/cli 1.02. I followed the Guide on how to upgrade #angular/cli.
I'll add my whole package.json down below if there's anything relevant there.
And I get this error:
ERROR in AppModule is not an NgModule
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (C:\development\projects-git\mydoc\static- web\node_modules\typescript\lib\typescript.js:9580:20)
at Object.createCompilerHost (C:\development\projects-git\mydoc\static-web\node_modules\typescript\lib\typescript.js:66674:26)
at Object.ngcLoader (C:\development\projects-git\mydoc\static-web\node_modules\#ngtools\webpack\src\loader.js:202:31)
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
in the guide I had to update my main.ts to this:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { enableProdMode } from '#angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
My full package.json is this:
{
"name": "angular2-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.1.1",
"#angular/common": "^4.1.1",
"#angular/compiler": "^4.1.2",
"#angular/core": "^4.1.2",
"#angular/forms": "^4.1.1",
"#angular/http": "^4.1.2",
"#angular/platform-browser": "^4.1.1",
"#angular/platform-browser-dynamic": "^4.1.1",
"#angular/platform-server": "^4.1.1",
"#angular/router": "^4.1.1",
"#ngtools/json-schema": "1.0.0",
"#ngtools/webpack": "1.2.3",
"#types/file-saver": "0.0.0",
"angular2-datatable": "^0.5.3",
"bootstrap-sass": "^3.3.7",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"moment": "^2.18.1",
"mydatepicker": "^1.9.1",
"ng2-bootstrap": "^1.6.1",
"ng2-page-scroll": "^4.0.0-beta.5",
"#ngx-translate/core": "^6.0.0",
"rxjs": "^5.4.0",
"string-to-json": "^0.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.0.2",
"#angular/compiler": "^4.1.2",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"codelyzer": "~2.0.0",
"extract-text-webpack-plugin": "^2.0.0-rc.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"karma-phantomjs-launcher-nonet": "0.1.3",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "2.3.2"
}
}
This makes it immpossible to build.
This seems to be a known issue.
Make sure your node modules have been reinstalled properly :
rm -rf node_modules && npm cache clean && npm uninstall --save angular-cli && npm uninstall -g angular-cli && npm i --save #angular/cli && npm i -g #angular/cli && npm i
Everything was running fine yesterday, now when I try to ng serve I get these errors:
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/Users/leongaban/Projects/TickerTags/wikitags/node_modules/typescript/lib/typescript.js:8062:20)
I tried the answers here and here but no effect :(
My global and local npm version for angular-cli is 1.0.0-beta.28.3 how do I upgrade that to .30? I tried #latest
My local package.json:
"devDependencies": {
"#angular/cli": "1.0.0-beta.28.3",
"#angular/compiler-cli": "^2.4.0",
My global package:
I see that the latest is beta.32 https://github.com/angular/angular-cli/releases
However when I run npm install -g angular-cli#latest it still installs .28.3
In package.json I changed:
"devDependencies": {
"#angular/cli": "1.0.0"
To:
"devDependencies": {
"#angular/cli": "1.2.0"
OS : Windows with Angular 4
"#angular/cli": "1.2.1"
"#angular/material": "2.0.0-beta.6"
I just removed the caret from above two dependencies and performed following steps, everything started working perfectly.
Remove node_module
Uninstall angular cli from local and global
Install the same version of angular cli in both
Do "npm install"
"ng serve"
They've moved to #angular/cli package name, to comply with the other #angular modules. To be sure you are not left with old files, perform the following steps:
npm uninstall -g #angular/cli
npm cache clean
npm install -g #angular/cli#latest
then remove your local node_modules folder and execute:
npm install --save-dev #angular/cli#latest
npm install
The latest angular cli version is .32. There are still issues with upgrading to newer versions, but hopefully with the next update they will have that under control. If not, repeat the steps I just mentioned
What worked for me is:
diff --git a/angular-cli.json b/angular-cli.json
index d74d5d4..2641672 100644
--- a/angular-cli.json
+++ b/angular-cli.json
## -1,7 +1,7 ##
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
- "version": "1.0.0-beta.31",
+ "version": "1.0.0-beta.28",
"name": "renaissance"
},
"apps": [
## -22,8 +22,8 ##
"styles.less"
],
"scripts": [],
+ "environmentSource": "environments/environment.ts",
"environments": {
- "source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
diff --git a/package.json b/package.json
index b91db8f..7e2b083 100644
--- a/package.json
+++ b/package.json
## -12,13 +12,13 ##
},
"private": true,
"dependencies": {
- "#angular/common": "^2.4.0",
- "#angular/compiler": "^2.4.0",
- "#angular/core": "^2.4.0",
- "#angular/forms": "^2.4.0",
- "#angular/http": "^2.4.0",
- "#angular/platform-browser": "^2.4.0",
- "#angular/platform-browser-dynamic": "^2.4.0",
+ "#angular/common": "^2.4.8",
+ "#angular/compiler": "^2.4.8",
+ "#angular/core": "^2.4.8",
+ "#angular/forms": "^2.4.8",
+ "#angular/http": "^2.4.8",
+ "#angular/platform-browser": "^2.4.8",
+ "#angular/platform-browser-dynamic": "^2.4.8",
"#angular/router": "^3.4.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
"angularfire2": "^2.0.0-beta.8",
## -27,15 +27,14 ##
"font-awesome": "^4.7.0",
"moment": "^2.17.1",
"ng2-bootstrap": "^1.3.3",
- "ng2-page-transition": "^0.2.6",
+ "ng2-page-transition": "^1.0.4",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.2.2",
"zone.js": "^0.7.2"
},
"devDependencies": {
- "#angular/cli": "1.0.0-beta.31",
- "#angular/compiler-cli": "^2.4.0",
+ "#angular/cli": "^1.0.0-beta.32.3",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
## -44,8 +43,8 ##
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
- "karma-jasmine": "^1.0.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
+ "karma-jasmine": "^1.0.2",
"protractor": "~5.1.0",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1f862c6..b6568b7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
## -8,7 +8,7 ## import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
// App modules/components
import {LayoutsModule} from "./Components/common/layout/layout.module";
import {BlochWidgetsModule} from "./Components/common/widgets/widgets.module";
-import {Ng2PageTransition} from "ng2-page-transition";
+import {Ng2PageTransitionModule} from "ng2-page-transition";
//services
import {PeopleHttpService} from "./Components/common/service/httpPeople.service";
//auth Module
## -30,9 +30,9 ## import {MessagingModule} from "./views/messaging/messaging.module";
#NgModule({
declarations: [
AppComponent,
- Ng2PageTransition,
],
imports: [
+ Ng2PageTransitionModule,
BrowserModule,
FormsModule,
HttpModule,
This worked for me :- rm -rf node_modules && npm cache clean && npm uninstall --save angular-cli; npm uninstall -g angular-cli; npm i --save #angular/cli && npm i -g #angular/cli && npm i
rm -rf node_modules/ in your project to get rid of all npm stuff and then npm cache clean followed by npm install should also resolve this issue. Also, make sure the versions of the cli locally and globally match.
https://github.com/angular/angular-cli/issues/3781
So none of the install #angular/cli#latest worked for me, most likely will work in the future I presume.
I had another angular2 project which was ng serve-ing fine. So I just copied the package.json dependencies from it and updated the angular-cli.json.
And now it works again!
package.json
"dependencies": {
"#angular/common": "^2.4.0",
"#angular/compiler": "^2.4.0",
"#angular/core": "^2.4.0",
"#angular/forms": "^2.4.0",
"#angular/http": "^2.4.0",
"#angular/platform-browser": "^2.4.0",
"#angular/platform-browser-dynamic": "^2.4.0",
"#angular/router": "^3.4.0",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/cli": "1.0.0-beta.31",
"#angular/compiler-cli": "^2.4.0",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"css-loader": "^0.26.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "^1.0.2",
"node-sass": "^4.5.0",
"node-sass-import": "^1.1.1",
"protractor": "~5.1.0",
"sass-loader": "^6.0.0",
"source-map-loader": "^0.1.6",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.0"
}
angular-cli.json
Had to revert back to the older type of "source" key
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
Just update to "#angular/cli": "1.0.0-rc.0" "#angular/compiler-cli": "2.4.0" in your package.json and update file angular-cli.json like below
change
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
by
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
Trying to implement bootstrap-loader for webpack, but I keep running into the same issue. Tried bringing it up with the github repo devs, but no they said it works? They also recommended downgrading to bootstrap alpha 2, which did not resolve the issue.
repo for reference
error
ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js?configFilePath=/home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc!./~/bootstrap-loader/no-op.js
Module build failed: Error:
Could not find bootstrap version: '4'. Did you install it?
The package is 'bootstrap' for bootstrap v4 and 'bootstrap-sass' for v3.
at Object.module.exports.pitch (/home/p3pt/dev/java/projects/sba2-wip/frontend/node_modules/bootstrap-loader/lib/bootstrap.loader.js:114:11)
debug log
[bootstrap-loader]: bootstrap-loader is using config file at /home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc
[bootstrap-loader]: Hey, we're in DEBUG mode because you have
your config log level set to 'debug'.
[bootstrap-loader]: Query from webpack config: ?configFilePath=/home/p3pt/dev/java/projects/sba2-wip/frontend/config/.bootstraprc
[bootstrap-loader]: Using Bootstrap module: bootstrap
[bootstrap-loader]: resolveModule error is [Error: Cannot find module 'bootstrap' from '/home/p3pt/dev/java/projects/sba2-wip/frontend/node_modules/bootstrap-loader/lib/utils']
[bootstrap-loader]: Bootstrap module location (abs): false
webpack config
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HMR = helpers.hasProcessFlag('hot');
const METADATA = webpackMerge(commonConfig.metadata, {
host: 'localhost',
port: 3000,
ENV: ENV,
HMR: HMR
});
const bootstrapDevEntryPoint = 'bootstrap-loader/lib/bootstrap.loader?' +
`configFilePath=${__dirname}/.bootstraprc` +
'!bootstrap-loader/no-op.js';
module.exports = webpackMerge(commonConfig, {
metadata: METADATA,
debug: true,
devtool: 'cheap-module-eval-source-map',
entry: {
bootstrapDevEntryPoint
},
output: {
path: helpers.root('dist'),
filename: '[name].js',
chunkFilename: '[id].chunk.js',
sourceMapFilename: '[name].map',
library: 'ac_[name]',
libraryTarget: 'var',
},
plugins: [
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'process.env': {
'ENV': JSON.stringify(METADATA.ENV),
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR
}
}),
],
devServer: {
port: METADATA.port,
host: METADATA.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
outputPath: helpers.root('dist')
},
node: {
global: 'window',
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
});
package.json
...
"dependencies": {
"#angular/common": "2.0.0-rc.5",
"#angular/compiler": "2.0.0-rc.5",
"#angular/core": "2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.5",
"#angular/platform-browser": "2.0.0-rc.5",
"#angular/platform-browser-dynamic": "2.0.0-rc.5",
"#angular/platform-server": "2.0.0-rc.5",
"#angular/router": "3.0.0-rc.1",
"bootstrap": "^4.0.0-alpha.2",
"core-js": "^2.4.1",
"font-awesome": "^4.6.3",
"jquery": "^3.1.0",
"lodash": "^4.15.0",
"moment": "^2.14.1",
"ng2-bootstrap": "^1.0.24",
"rxjs": "5.0.0-beta.11",
"tether": "^1.3.4",
"zone.js": "^0.6.17"
},
"devDependencies": {
"#types/jasmine": "^2.2.33",
"#types/lodash": "4.14.34",
"#types/node": "^6.0.38",
"#types/source-map": "^0.1.26",
"#types/webpack": "^1.12.33",
"angular2-hmr": "~0.8.1",
"angular2-template-loader": "^0.5.0",
"autoprefixer": "^6.4.0",
"awesome-typescript-loader": "2.2.1",
"bootstrap-loader": "^2.0.0-beta.3",
"codelyzer": "0.0.28",
"css-loader": "^0.24.0",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.9.0",
"font-awesome-sass-loader": "^1.0.2",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"node-sass": "^3.8.0",
"postcss-loader": "^0.10.1",
"raw-loader": "^0.5.1",
"remap-istanbul": "^0.6.4",
"resolve": "^1.1.7",
"resolve-url-loader": "^1.6.0",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.0",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.1",
"ts-node": "^1.3.0",
"tslint": "^3.15.1",
"tslint-loader": "^2.1.5",
"typescript": "^2.0.0-beta",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.21",
"webpack-dev-server": "^2.1.0-beta.0",
"webpack-merge": "^0.14.1"
}
...
The issue is that bootstrap alpha 3 is broken, and the recommendation to downgrade to alpha 2 actually does work. I misunderstood that npm install would pick up on the ^ symbol and upgrade the package.
The fix revolves in changing the following in package.json
change
"bootstrap": "^4.0.0-alpha.2"
to
"bootstrap": "4.0.0-alpha.2"
I'm trying to use SASS with angular-cli. I've read the docs and found other SO q/a's that talk about setting it up...but it keeps failing the build.
Here's my setup:
angular-cli-build.js
sassCompiler: {
includePaths: ['src/app/styles']
}
src/app/styles/master.scss
#import 'folder/variables';
#import 'folder/headers';
src/app/styles/folder/_variables.scss
$headers-bg: #ababab;
src/app/styles/folder/_headers.scss
h1 {
background-color: $headers-bg;
}
package.json (per request)
{
"name": "my-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng server",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "^0.6.12"
},
"devDependencies": {
"angular-cli": "^1.0.0-beta.5",
"codelyzer": "0.0.19",
"ember-cli-inject-live-reload": "^1.4.0",
"jasmine-core": "^2.4.1",
"jasmine-spec-reporter": "^2.4.0",
"karma": "^0.13.15",
"karma-chrome-launcher": "^0.2.3",
"karma-jasmine": "^0.3.8",
"node-sass": "^3.7.0",
"protractor": "^3.3.0",
"ts-node": "^0.5.5",
"tslint": "^3.6.0",
"typescript": "^1.8.10",
"typings": "^0.8.1"
}
}
Unfortunately, the build fails because it doesn't know what $bg is.
Build failed.
File: /my-app/tmp/sassplugin-input_base_path-jFTXlfed.tmp/0/
src/app/styles/folder/_more.scss (2)
The Broccoli Plugin: [SASSPlugin] failed with:
Error: Undefined variable: "$headers-bg".
What am I missing? Its as if the compiler isn't respecting the normal behavior of ignoring the "_"'d file names.
After reading through the source code, I found this 17 day old commit.
I was right in my initial hunch that it wasn't ignoring partials. Basically, you have to tell the sassCompiler that you want it to ignore them.
Here's how:
sassCompiler: {
cacheExclude: [/\/_[^\/]+$/]
}
https://github.com/angular/angular-cli/commit/6b45099b6a277ecd7a57f2d2e632bf40af774879
You have things a little backwards as you're importing in a style and not importing your variable... see this example as a guide...
define your variables:
_variables.scss
$bg: #ababab;
use them:
site.scss
#import '_variables';
body {
background: $bg;
}