Компиляция sass документа при перезагрузке страницы

#sass #scss

Я создал функцию, которая генерирует случайный цвет. Но возникла проблема - она не
работает при перезагрузке страницы. Как мне сделать так, чтобы scss файл компилировался
каждую перезагрузку? Можно на любой технологии.
    

Ответы

Ответ 1

P.S. Изменения ответа за 23.10.2017   Я тут расхваливал webpack и даже за конкурсный
вопрос 100 балов получил, но есть проблема, в той конструкции которую я привел, less
отказывается читать background-image: url(путь к картинке) ; путь должен быть обязательно
в одинарных кавычках, но используя новый приведенный пример файла webpack.config.js,
там все исправлено. В комментах  есть объяснения что к чему.

Предлагаю webpack, ниже привожу полную структуру. Не обязательно что-бы сервер был
именно nodejs, но именно для webpack, nodejs  должен присутствовать...

Файл в корне webpack.config.js.  в примере ниже используется less, но нет абсолютно
ни какой разницы, просто замените less на sass и естественно пакеты установки не less,
а sass. Работоспособность проверена полностью, один минус, не показывает ошибки, надо
быть внимательнее, когда пишите код на sass компилирует даже с ошибками. Можно просто
создавать сотню файлов sass и все они будут прописываться в один css файл, лично для
меня это удобно, подключаешь один css и все работает. Куда какие файлы прописать увидите
в комментариях в файле  webpack.config.js
И еще забыл добавить, для того чтобы все файлы sass или less  компилировались надо
их импортировать в главный less или sass !!! 

       var path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: "./less/main.less", // путь откуда берет less
    node: {
        fs: 'empty',
        net: 'empty'
    },
    output: {
        path: __dirname + "/public/css", // путь куда вставлять компилированный css 
        filename: "bundle.js"
    },
    module: {
        rules: [{
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/,
                include: [
                    path.resolve(__dirname, './img/')  // а тут надо прописать имя
папки откуда будет брать все картинки
                ],
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: './public/img/[hash].[ext]', 
                    }
                }]
            },
            {
                test: /\.(ttf|eot|woff|woff2|png|jpg|jpeg|svg|gif)$/,
                loader: 'url-loader'
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'main.css' // а тут надо прописать имя css которое вы хотите 
        })
    ]
};


Далее привожу пример файл package.json там найдете команды запуска именно webpack,
и увидите, что установить 

       {
  "name": "********",
  "version": "1.0.0",
  "description": "***********************",
  "main": "serv.js",
  "scripts": {
    "start": "node serv",
    "watch": "webpack -w --config webpack.config.js"/*команда запуска webpack  npm
rum watch*/
  },
  "repository": {
    "type": "git",
    "url": "**********************************"
  },
  "keywords": [
    "short",
    "advertising",
    "site"
  ],
  "author": "***************",
  "license": "ISC",
  "homepage": "*******************",
  "dependencies": {
        "body-parser": "^1.18.2",
"css-loader": "^0.28.7",
"express": "^4.16.1",
"fs": "0.0.1-security",
"mongoose": "^4.12.1",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
  },
  "devDependencies": {
    "extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"webpack": "^3.6.0"
  }
}


Ответ 2

Вместо того, чтобы компилировать scss в статический css, надо выполнять компиляцию
либо сервером, отдающим css-файл, либо непосредвственно на клиенте.


Ответ 3

Можете использовать browser-sync. В одной консоли запускаете сборщик sass в режиме watch:

sass -w


В другой запускаете browser-sync:

browser-sync start --server --files "*.css"


В этом случае каждый раз после сборки готового css он будет отдаваться сразу без
перезагрузки страницы.


Ответ 4

Как мне сделать так, чтобы scss файл компилировался каждую перезагрузку?


В подобных вопросах я совсем новичок. Похожим вопросом я занялся буквально пару дней
назад. Бегло посмотрел инструментарий в сети. Нашел для себя хорошее решение - Koala.
Собственно его и рекомендую. Программа работает с Sass, Less и CoffeeScript. Имеет
собственный самодостаточный инструментарий, хотя и позволяет подключать внешние компиляторы.
На ваш выбор. Может работать в режиме активного мониторинга - запускает перекомпиляцию
как только обнаружит изменение scss-файла. Бесплатна.

Использовать крайне просто. Как пример. Создаем каталог проекта. В нем создаем два
подкаталога css и sass. В подкаталоге sass создаем файл styles.scss и каталог проекта
добавляем в Koala, в настройках включаем активный мониторинг (по умолчанию он вроде
включен). Результирующий файл styles.css будет лежать в подкаталоге css. При каждой
перезаписи styles.scss будет происходить его фоновая перекомпиляция.

Одно важное предупреждение

На момент написания данного ответа последняя версия данной программы - 2.2.0. И ее
не следует использовать! На фоне множества улучшений имеет существенный неисправленный
баг при работе с UTF-8. Поэтому нужно использовать предыдущую версию 2.1.4, ссылку
можно найти на этой страничке.

По поводу использования в продакшене

В этом случае я бы не использовал описанную выше программу на сервере, а использовал
бы обычный sass-компилятор. В случае нагрузки, параллельных запросов, думаю, имеет
смысл создать и свой параллелизм обработки. Некий процесс должен поддерживать "пул"
сгенерированных стилей (пополнять новыми, удалять уже отданные). А основной процесс
должен мочь с этим "пулом" работать.

Дабы не нарваться на кэширование, основной процесс должен отдавать странички с указанием
версии файла стилей. Как-то так.