Skip to content

D
default2
Commit f34a8eb1 authored by Yuri Bondarenko's avatar Yuri Bondarenko
Browse files
Options

js, css

parent 45941335
Hide whitespace changes
Inline Side-by-side
Showing with 313 additions and 137 deletions
gulpfile.js
View file @ f34a8eb1
/**
* ===================== SETTINGS ========================
*/
/**
* Библиотеки CSS
*/
var libCSS = [
// 'src/assets/fonts/stylesheet.css',
// 'node_modules/bootstrap/dist/css/bootstrap.css'
];
/**
* Версии поддерживаемых браузеров
*/
var platform = [ 'last 4 versions', 'ie >= 11', 'iOS >= 9' ];
/* ======================================================== */ /* ======================================================== */
/* global require */ /* global require */
var gulp = require( 'gulp' ); // Собственно gulp var gulp = require( 'gulp' ); // Собственно gulp
var pump = require( 'pump' ); // отслеживание ошибок var pump = require( 'pump' ); // отслеживание ошибок
var concat = require( 'gulp-concat' ); // объединение набора файлов в один var concat = require( 'gulp-concat' ); // объединение набора файлов в один
var include = require( 'gulp-file-include' ); // включение файлов
var clean = require( 'gulp-clean' ); // удаление файлов и каталогов
var postcss = require( 'gulp-postcss' ); // Пост-обработка CSS var postcss = require( 'gulp-postcss' ); // Пост-обработка CSS
var postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next var postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next
var cssvariables = require('postcss-css-variables'); var cssvariables = require('postcss-css-variables'); // полифил для CSS-переменных
var atImport = require('postcss-import'); // парсинг и включение импорта CSS
var sourcemaps = require( 'gulp-sourcemaps' ); // карты исходного кода var sourcemaps = require( 'gulp-sourcemaps' ); // карты исходного кода
var webpack = require( 'webpack-stream' ); var webpack = require( 'webpack-stream' );
...@@ -32,14 +19,52 @@ var compiler = require( 'webpack' ); ...@@ -32,14 +19,52 @@ var compiler = require( 'webpack' );
var imagemin = require( 'gulp-image' ); // оптимизация картинок var imagemin = require( 'gulp-image' ); // оптимизация картинок
var cache = require( 'gulp-cache' ); var cache = require( 'gulp-cache' );
var include = require( 'gulp-file-include' ); // включение файлов var browserSync = require( 'browser-sync' ).create(); // обновление налету
var clean = require( 'gulp-clean' ); // удаление файлов и каталогов /* ========================================================== */
var browserSync = require( 'browser-sync' ).create(); // обновление налету /**
* Библиотеки CSS
*/
const libCSS = [
// 'src/assets/fonts/stylesheet.css',
// 'node_modules/bootstrap/dist/css/bootstrap.css'
];
/**
* Настройки CSS
*/
const postcssOptions = [
atImport(),
postcssPresetEnv({
features: {
'custom-properties': false
},
stage: 0,
autoprefixer: {
grid: true,
browsers: [ 'last 4 versions', 'ie >= 11', 'iOS >= 9' ]
}
}),
cssvariables()
];
/**
* Сделать один CSS
*/
const isOneCSS = true;
/**
* Сделать один JS
*/
const isOneJS = true;
/* ================================================================= */
// ================== CLEAN ============================ /**
// Полная очистка * CLEAN
* Полная очистка
*/
gulp.task( 'CLEAN', function( cb ){ gulp.task( 'CLEAN', function( cb ){
pump([ pump([
gulp.src( [ './dev', './prod' ], { read: false } ), gulp.src( [ './dev', './prod' ], { read: false } ),
...@@ -48,64 +73,46 @@ gulp.task( 'CLEAN', function( cb ){ ...@@ -48,64 +73,46 @@ gulp.task( 'CLEAN', function( cb ){
}); });
// ================== LESS ============================ /**
* CSS
*/
gulp.task( 'dev:css', function( cb ){
// Собираем все CSS библиотеки // Собираем вендорные либы
gulp.task( 'dev:css-libs', function( cb ){ pump([
pump( [
gulp.src( libCSS ), gulp.src( libCSS ),
concat( 'vendor.css' ), concat( 'vendor.css' ),
gulp.dest( './dev/assets/css' ) gulp.dest( './dev/assets/css' )
], cb ); ]);
});
// Собираем CSS
gulp.task( 'dev:css', [ 'dev:css-libs' ], function( cb ){
// Настройки для вендорных префиксов
var plugins = [
postcssPresetEnv({
stage: 0
})
];
// Собираем свои стили
pump([ pump([
gulp.src( './src/assets/less/*.less' ), gulp.src( './src/assets/css/*.css' ),
sourcemaps.init(), sourcemaps.init(),
postcss( plugins ), postcss( postcssOptions ),
sourcemaps.write( '.' ), sourcemaps.write( '.' ),
gulp.dest( './dev/assets/css' ), gulp.dest( './dev/assets/css' ),
browserSync.stream() browserSync.stream()
], cb ); ], cb );
}); });
// Собираем все CSS библиотеки
gulp.task( 'prod:css-libs', function( cb ){
// Собираем CSS
gulp.task( 'prod:css', function( cb ){
// Собираем вендорные либы
pump([ pump([
gulp.src( libCSS ), gulp.src( libCSS ),
concat( 'vendor.css' ), concat( 'vendor.css' ),
gulp.dest( './docs/assets/css' ) gulp.dest( './prod/assets/css' )
], cb ); ]);
});
// Собираем CSS
gulp.task( 'prod:css', [ 'prod:css-libs' ], function( cb ){
// Настройки для вендорных префиксов
var plugins = [
postcssPresetEnv({
features: {
'custom-properties': false
},
stage: 0,
autoprefixer: { grid: true }
}),
cssvariables()
];
// Собираем свои стили
pump([ pump([
gulp.src( './src/assets/css/*.css' ), gulp.src( './src/assets/css/*.css' ),
postcss( plugins ), sourcemaps.init(),
gulp.dest( './prod/assets/css' ) postcss( postcssOptions ),
sourcemaps.write( '.' ),
gulp.dest( './prod/assets/css' ),
], cb ); ], cb );
}); });
...@@ -173,7 +180,7 @@ gulp.task('prod:img', function( cb ) { ...@@ -173,7 +180,7 @@ gulp.task('prod:img', function( cb ) {
cache( cache(
imagemin() imagemin()
), ),
gulp.dest( './docs/assets/img' ) gulp.dest( './prod/assets/img' )
], cb ); ], cb );
}); });
...@@ -198,24 +205,25 @@ gulp.task( 'dev:html', function( cb ){ ...@@ -198,24 +205,25 @@ gulp.task( 'dev:html', function( cb ){
}), }),
gulp.dest( './dev' ) gulp.dest( './dev' )
], cb ); ], cb );
});
// Статичные файлы
gulp.task( 'dev:static', function( cb ){
pump([ pump([
gulp.src( [ gulp.src( [
'./src/favicon.ico', './src/favicon.ico',
'./src/robots.txt', './src/robots.txt'
'./src/CNAME'
] ), ] ),
gulp.dest( './dev' ) gulp.dest( './dev' )
], cb ); ], cb );
}); });
// HTML для prod // HTML для prod
gulp.task( 'prod:html', function( cb ){ gulp.task( 'prod:html', function( cb ){
pump([ pump([
gulp.src( ['./src/**/*.html', '!./src/assets/*.html', '!./src/components/**/*.html', './src/**/*.xml', './src/**/*.xsl'] ), gulp.src([
'./src/**/*.html',
'!./src/assets/*.html',
'!./src/components/**/*.html'
]),
include({ include({
prefix: '@@', prefix: '@@',
basepath: '@file', basepath: '@file',
...@@ -223,25 +231,23 @@ gulp.task( 'prod:html', function( cb ){ ...@@ -223,25 +231,23 @@ gulp.task( 'prod:html', function( cb ){
rev: +new Date rev: +new Date
} }
}), }),
gulp.dest( './docs' ) gulp.dest( './prod' )
], cb ); ], cb );
});
// Статичные файлы
gulp.task( 'prod:static', function( cb ){
pump([ pump([
gulp.src( [ gulp.src( [
'./src/favicon.ico', './src/favicon.ico',
'./src/robots.txt', './src/robots.txt',
'./src/CNAME'
] ), ] ),
gulp.dest( './docs' ) gulp.dest( './prod' )
], cb ); ]);
}); });
// ================== DEV ============================ // ================== DEV ============================
// Слежение за dev // Слежение за dev
gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html', 'dev:static' ], function() { gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html' ], function() {
browserSync.init({ browserSync.init({
server: { server: {
...@@ -249,8 +255,8 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html', 'dev:static' ], ...@@ -249,8 +255,8 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html', 'dev:static' ],
} }
}); });
gulp.watch( './src/assets/less/*.less' , ['dev:css']); gulp.watch( './src/assets/css/*.css' , ['dev:css']);
gulp.watch( './src/components/**/*.less' , ['dev:css', 'dev:js']); gulp.watch( './src/components/**/*.css' , ['dev:css']);
gulp.watch( './src/assets/js/*.js', [ 'dev:js' ] ); gulp.watch( './src/assets/js/*.js', [ 'dev:js' ] );
gulp.watch( './src/components/**/*.js', [ 'dev:js' ] ); gulp.watch( './src/components/**/*.js', [ 'dev:js' ] );
...@@ -271,6 +277,6 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html', 'dev:static' ], ...@@ -271,6 +277,6 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html', 'dev:static' ],
// ================== PROD ============================ // ================== PROD ============================
// Публикация на prod // Публикация на prod
gulp.task( 'PROD', [ 'prod:clean' ], function(){ gulp.task( 'PROD', function(){
gulp.start( 'prod:img', 'prod:css', 'prod:js', 'prod:html', 'prod:static' ); gulp.start( 'prod:img', 'prod:css', 'prod:js', 'prod:html' );
}); });
\ No newline at end of file
package-lock.json
View file @ f34a8eb1
...@@ -2584,6 +2584,16 @@ ...@@ -2584,6 +2584,16 @@
"integrity": "sha512-YfQ1tAUZm561vpYD+5eyWN8+UsceQbSrqqlc/6zDY2gtAE+uZLSdkkovhnGpmCThsvKBFakq4EdY/FF93E8XIw==", "integrity": "sha512-YfQ1tAUZm561vpYD+5eyWN8+UsceQbSrqqlc/6zDY2gtAE+uZLSdkkovhnGpmCThsvKBFakq4EdY/FF93E8XIw==",
"dev": true "dev": true
}, },
"collect-stream": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/collect-stream/-/collect-stream-1.2.1.tgz",
"integrity": "sha1-gptBdGQxseJ+AebNPQrBY8IqHKc=",
"dev": true,
"requires": {
"concat-stream": "^1.2.0",
"once": "^1.3.0"
}
},
"collection-visit": { "collection-visit": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
...@@ -6942,6 +6952,67 @@ ...@@ -6942,6 +6952,67 @@
} }
} }
}, },
"gulp-cssimport": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/gulp-cssimport/-/gulp-cssimport-7.0.0.tgz",
"integrity": "sha512-ulnmFwJTY+i6f2b5sN4ePzCotwWKx8I68rwdBu7fRtVAj6QE+X0L2mUhUoXDcDBt4LVnOYhWtFBH3ETXGxDzTg==",
"dev": true,
"requires": {
"collect-stream": "^1.2.1",
"deep-extend": "^0.6.0",
"http-https": "^1.0.0",
"lodash.trim": "^4.5.1",
"lookup-path": "^0.3.1",
"magic-string": "^0.25.1",
"minimatch": "^3.0.4",
"pify": "^3.0.0",
"plugin-error": "^0.1.2",
"strip-bom": "^3.0.0",
"through2": "^2.0.3",
"vinyl": "^2.2.0",
"vinyl-sourcemaps-apply": "^0.2.1"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
},
"clone-stats": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
"integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=",
"dev": true
},
"replace-ext": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
"integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
"dev": true
},
"strip-bom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
"dev": true
},
"vinyl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.0.tgz",
"integrity": "sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==",
"dev": true,
"requires": {
"clone": "^2.1.1",
"clone-buffer": "^1.0.0",
"clone-stats": "^1.0.0",
"cloneable-readable": "^1.0.0",
"remove-trailing-separator": "^1.0.1",
"replace-ext": "^1.0.0"
}
}
}
},
"gulp-decompress": { "gulp-decompress": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/gulp-decompress/-/gulp-decompress-1.2.0.tgz", "resolved": "https://registry.npmjs.org/gulp-decompress/-/gulp-decompress-1.2.0.tgz",
...@@ -7778,6 +7849,12 @@ ...@@ -7778,6 +7849,12 @@
} }
} }
}, },
"http-https": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/http-https/-/http-https-1.0.0.tgz",
"integrity": "sha1-L5CN1fHbQGjAWM1ubUzjkskTOJs=",
"dev": true
},
"http-proxy": { "http-proxy": {
"version": "1.15.2", "version": "1.15.2",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.15.2.tgz", "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.15.2.tgz",
...@@ -9168,6 +9245,12 @@ ...@@ -9168,6 +9245,12 @@
"lodash.escape": "^3.0.0" "lodash.escape": "^3.0.0"
} }
}, },
"lodash.trim": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/lodash.trim/-/lodash.trim-4.5.1.tgz",
"integrity": "sha1-NkJefukL5KpeJ7zruFt9EepHqlc=",
"dev": true
},
"log-symbols": { "log-symbols": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
...@@ -9211,6 +9294,52 @@ ...@@ -9211,6 +9294,52 @@
"integrity": "sha512-TmYTeEYxiAmSVdpbnQDXGtvYOIRsCMg89CVZzwzc2o7GFL1CjoiRPjH5ec0NFAVlAx3fVof9dX/t6KKRAo2OWA==", "integrity": "sha512-TmYTeEYxiAmSVdpbnQDXGtvYOIRsCMg89CVZzwzc2o7GFL1CjoiRPjH5ec0NFAVlAx3fVof9dX/t6KKRAo2OWA==",
"dev": true "dev": true
}, },
"lookup-path": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/lookup-path/-/lookup-path-0.3.1.tgz",
"integrity": "sha1-pO8kEK4yZpr3AMTLfhsBCVCc8rg=",
"dev": true,
"requires": {
"debug": "^2.2.0",
"is-absolute": "^0.2.3"
},
"dependencies": {
"is-absolute": {
"version": "0.2.6",
"resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",
"integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=",
"dev": true,
"requires": {
"is-relative": "^0.2.1",
"is-windows": "^0.2.0"
}
},
"is-relative": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
"integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=",
"dev": true,
"requires": {
"is-unc-path": "^0.1.1"
}
},
"is-unc-path": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
"integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=",
"dev": true,
"requires": {
"unc-path-regex": "^0.1.0"
}
},
"is-windows": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
"integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
"dev": true
}
}
},
"loose-envify": { "loose-envify": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
...@@ -9273,6 +9402,15 @@ ...@@ -9273,6 +9402,15 @@
"integrity": "sha512-mmLbumEYMi5nXReB9js3WGsB8UE6cDBWyIO62Z4DNx6GbRhDxHNjA1MlzSpJ2S2KM1wyiPRA0d19uHWYYvMHjA==", "integrity": "sha512-mmLbumEYMi5nXReB9js3WGsB8UE6cDBWyIO62Z4DNx6GbRhDxHNjA1MlzSpJ2S2KM1wyiPRA0d19uHWYYvMHjA==",
"dev": true "dev": true
}, },
"magic-string": {
"version": "0.25.1",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.1.tgz",
"integrity": "sha512-sCuTz6pYom8Rlt4ISPFn6wuFodbKMIHUMv4Qko9P17dpxb7s52KJTmRuZZqHdGmLCK9AOcDare039nRIcfdkEg==",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.1"
}
},
"make-dir": { "make-dir": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
...@@ -11157,6 +11295,31 @@ ...@@ -11157,6 +11295,31 @@
} }
} }
}, },
"postcss-import": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
"integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
"dev": true,
"requires": {
"postcss": "^7.0.1",
"postcss-value-parser": "^3.2.3",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
},
"dependencies": {
"postcss": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.6.tgz",
"integrity": "sha512-Nq/rNjnHFcKgCDDZYO0lNsl6YWe6U7tTy+ESN+PnLxebL8uBtYX59HZqvrj7YLK5UCyll2hqDsJOo3ndzEW8Ug==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.5.0"
}
}
}
},
"postcss-initial": { "postcss-initial": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.0.tgz", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.0.tgz",
...@@ -12123,6 +12286,23 @@ ...@@ -12123,6 +12286,23 @@
"readable-stream": "^2.0.0" "readable-stream": "^2.0.0"
} }
}, },
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
"dev": true,
"requires": {
"pify": "^2.3.0"
},
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
}
},
"read-pkg": { "read-pkg": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
...@@ -13590,6 +13770,12 @@ ...@@ -13590,6 +13770,12 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true "dev": true
}, },
"sourcemap-codec": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz",
"integrity": "sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg==",
"dev": true
},
"sparkles": { "sparkles": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz", "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
......
src/assets/css/app.css
View file @ f34a8eb1
@custom-media --viewport-medium (width <= 50rem); /**
* Базовый CSS
*/
@custom-selector :--heading h1, h2, h3, h4, h5, h6; @import url('../../components/common/common.css');
@import url('../../components/button/button.css');
:root {
--mainColor: #12345678;
}
body {
color: var(--mainColor);
font-family: system-ui;
overflow-wrap: break-word;
}
:--heading {
background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);
@media (--viewport-medium) {
margin-block: 0;
}
}
a {
color: rgb(0 0 100% / 90%);
&:hover {
color: rebeccapurple;
}
}
:root {
--global-color: #fff;
--global-color-hover: green;
--btn-color: var(--global-color);
--btn-color-hover: var(--global-color-hover);
}
.btn {
color: var(--btn-color);
}
.btn:hover {
color: var(--btn-color-hover); /* works */
}
.btn.hover {
color: var(--btn-color-hover); /* this does not work */
}
\ No newline at end of file
src/components/button/button.css 0 → 100644
View file @ f34a8eb1
:root {
--buttonText: #333;
--buttonBg: #999;
}
.button {
color: var(--buttonText);
background-color: var(--buttonBg);
font-family: var(--font);
}
\ No newline at end of file
src/components/common/common.css 0 → 100644
View file @ f34a8eb1
:root {
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html {
font-size: 16px;
}
body {
padding: 0;
margin: 0;
font-family: var(--font);
font-size: 1rem;
}
\ No newline at end of file
src/components/header/index.html 0 → 100644
View file @ f34a8eb1
<div class="header">
<button class="button">Alert</button>
</div>
\ No newline at end of file
webpack.dev.js
View file @ f34a8eb1
...@@ -5,11 +5,7 @@ ...@@ -5,11 +5,7 @@
/* global module */ /* global module */
module.exports = { module.exports = {
mode: 'development', mode: 'development',
entry: [ './src/assets/js/*.js' ], devtool: 'source-map',
output: {
filename: '[name].js',
},
// devtool: 'source-map',
module: { module: {
rules: [ rules: [
{ {
......
webpack.prod.js
View file @ f34a8eb1
...@@ -5,9 +5,11 @@ ...@@ -5,9 +5,11 @@
/* global module */ /* global module */
module.exports = { module.exports = {
mode: 'production', mode: 'production',
entry: [ './src/assets/js/app.js' ], entry: {
app: './src/assets/js/app.js'
},
output: { output: {
filename: '[name].js', filename: '[name].js'
}, },
// devtool: 'source-map', // devtool: 'source-map',
module: { module: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment