Я создал функцию, которая генерирует случайный цвет. Но возникла проблема - она не работает при перезагрузке страницы. Как мне сделать так, чтобы scss файл компилировался каждую перезагрузку? Можно на любой технологии.
Ответ
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"
}
}
Комментариев нет:
Отправить комментарий