Задать вопрос
bpc_user10admin

Vlad Ab

JavaScript
Лайки

  • VueJS: где лучше хранить css, в компонентах .vue или main.css?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

    Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.

    Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

    Что делаем:
    Подключаем в точке входа (main.js) основной стилевой файл:
    import '@/styles/main.scss';
import Vue from 'vue';
//...

    В нем подключаем всякое-разное-глобальное-базовое:
    @import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...

    Далаем два файла: env-development.scss и env-production.scss
    $NODE_ENV: development;
@import "cfg-vars";

    $NODE_ENV: production;
@import "cfg-vars";

    Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
    Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги
    $DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;

@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";

$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;

//==
//== Color palette
//== ======================================= ==//

$palette-light-blue: #3c8dbc; // Primary
$palette-red       : #dd4b39; // Danger
$palette-green     : #00a65a; // Success
$palette-aqua      : #00c0ef; // Info
$palette-yellow    : #f39c12; // Warning

...


    Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
    Идём в vue.config.js и добавляем секцию css:
    const NODE_ENV = process.env.NODE_ENV === 'development'
    ? 'development'
    : 'production';
//...
module.exports = {
    //...
    css: {
        extract: NODE_ENV === 'production',
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
            },
        },
    },
};


    Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

    Enjoy!
    Ответ написан
    6 комментариев
    6 комментариев

  • Как перевести трафик с одного ASBR на другой?

    @KhoreffMikhail
    CCNP
    А как полностью звучит вопрос?
    Проектная работа по замене старого ASBR на новый? А допустим ли дайнтайм? Есть ли резервный линк в интернет?
    Или у нас два ASBR, нужно накрутить политики и правила, что б трафик шел не через первый, а через второй? Тогда BGP-шные атрибуты local-preference и другие.
    Ответ написан
    Комментировать
    Комментировать

  • Как корректно формировать slug в laravel 5.1?

    @Nc_Soft
    В хуке saving сделать $this->slug = str_slug($this->title)
    laravel.com/docs/5.1/eloquent#events
    Ответ написан
    1 комментарий
    1 комментарий

  • Как проверить добавление в БД и вывод результата ajax?

    @myphpscript
    без заморочек если:
    $.ajax({
    url: 'db_users.php',  // Файл в котором происходит добавление в БД
    type: 'POST', // Делаем POST запрос
    data: data,
    dataType: 'json',
    success: function(response)
    {
        if(response.result) {
            if(response.data == 1) {
                func1();
            }else if(response.data == 2) {
                func2();
            }
        }else{
            $('#form-message').html(response.message);
        }
    }
});


    if ($email != NULL) {
    if (mysql_query("INSERT INTO users (`email`) VALUES ('$email')")) {
        echo json_encode(array(
        	'result' => true,
        	'data' => 1, 
        ));
    }
    else {
    	echo json_encode(array(
        	'result' => false,
        	'message' => "Произошла ошибка", 
        ));
    }
}
    Ответ написан
    Комментировать
    Комментировать