#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-компилятор. В случае нагрузки, параллельных запросов, думаю, имеет
смысл создать и свой параллелизм обработки. Некий процесс должен поддерживать "пул"
сгенерированных стилей (пополнять новыми, удалять уже отданные). А основной процесс
должен мочь с этим "пулом" работать.
Дабы не нарваться на кэширование, основной процесс должен отдавать странички с указанием
версии файла стилей. Как-то так.
