Tag: css

JS中的外部CSS: 我试图将我的样式绑定到我的项目目录中的一些外部CSS。我的应用程序structre看起来像这样： webDTU app.js public/ stylesheets/ style.css avgrund.css animate.css views/ index.jade UserHome.jade …. …. 我的UserHome.jade ： doctype html html head title MQTT Chat Application script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js') link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic', type='text/css') link(rel='stylesheet', href='../public/stylesheets/animate.css', type='text/css') link(rel='stylesheet', href='../public/stylesheets/style.css', type='text/css') link(rel='stylesheet', href='../public/stylesheets/avgrund.css', type='text/css') body .avgrund-contents header h1 hi #{title} .pr.center.wrapper .cf.pr.chat.animate .pa.chat-shadow ….. 我的app.js ： var express = require('express'); var […]

为什么这个请求返回一个200（从caching），但其他人返回304？: 那么我正在浏览器caching，并写一个节点HTTP服务器，以帮助我学习，我使用caching控制和最后修改。然后在Chrome中input这个url，我只需按下F5来查看caching是否有效。最后结果似乎有些奇怪。一个返回200，其他返回304如例外 Intro_1.jpg是由style.css（ background-image:url(../images/intro_1.jpg ）;）为什么这个请求返回一个200（从caching），但其他人返回304？那是对的吗？

咕噜指南针更改outputStyle上部署: 我的Gruntfile检查我在哪个Git分支（dev，test或prod），如果“prod”我想用compass（grunt-contrib-compass）缩小/压缩CSS。但我无法更改罗盘options的outputStyle属性。不过，我可以改变我的自定义meta.build.outputStyle在部署function“压缩”，但无法更改compass.site_x.options.outputStyle阅读该元variables。有任何想法吗？ Gruntfile总结（部分除外）： module.exports = function(grunt) { grunt.initConfig({ meta:{ build: { outputStyle: 'expanded' } }, compass: { site_x: { options: { // Target options sassDir: 'sass', specify: 'sass/legacy/main.scss', cssDir: 'dist/styles', imagesDir: "images", outputStyle: "<%= meta.build.outputStyle %>", config: "./config.rb" } } }, …. //misc }); …. //misc function deploy(environment) { if(environment === "prod") { […]

将gatsby项目从css转换为scss，在丢失网格预处理方面存在问题: 我正在采用一个使用迷失网格的gatsby starter项目，并从css转换为scss来获得一些收益。这是启动项目： https ： //github.com/wpioneer/gatsby-starter-lumen 从本质上讲，我将项目转换为scss，因为我更喜欢它的结构，并希望从所有的css文件中移走。现在，我简单地说：安装了sass-loader ， scss和node-sass 将所有的css文件重命名为scss文件并修改gatsby-node.js到以下内容： var rucksack = require('rucksack-css') var lost = require("lost") var cssnext = require("postcss-cssnext") exports.modifyWebpackConfig = function(config, env) { config.merge({ postcss: [ lost(), rucksack(), cssnext({ browsers: ['>1%', 'last 2 versions'] }) ] }) config.loader('svg', { test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader', }) config.loader('sass', { test: /\.scss$/, […]

用JavaScript平衡对象的宽度: 我有我打印在我的模板与对象的列表 each object in objects <div class="col-md-4">..</div> 我使用Bootstrap，所以col-md-4意味着div元素应该占用1/3的空间。但是我希望col-md-4是随机的。但是我想要这样，1,2或3个元素占据整行（应该总计为12）。所以我想要它 <div class="col-md-4">..</div> <div class="col-md-4">..</div> <div class="col-md-4">..</div> 要么 <div class="col-md-8">..</div> <div class="col-md-4">..</div> 要么 <div class="col-md-4">..</div> <div class="col-md-8">..</div> 要么 <div class="col-md-6">..</div> <div class="col-md-6">..</div> 要么 <div class="col-md-12">..</div> 这几乎是大多数在线报纸的样子。但我不知道如何平衡它。我想我应该采取整个数组objects并随机select多less行。如果我有15个元素，我最多可以做15行（每个都有col-md-12 ），我必须至less做15/3 = 5行，所以行数应该在中间。然后，我需要决定每行应该有多less列，然后平衡每个对象的宽度，使特定行中的元素总和为12。我怎样才能做到这一点？另外，在大多数报纸网站上，不同文章的大小似乎并不完全是随机的（就像我的脚本那样），那么他们怎么可能有随机的大小，虽然他们不经常改变？我想我可以通过使用对象的创build时间或其他东西来确定它们的大小？更具体地说，我不必将行封装在列中。我只需要确保成功的对象总和为12。所以，如果我有5个对象，他们需要，例如，打印 col-md-12 col-md-4 col-md-4 col-md-4 col-md-12 要么 […]

提高webpack图像/ CSS编译时间？: 我最近接pipe了一个前端项目，并注意到dev脚本的初始启动时间（带有热模块重装等）需要很长时间，大约2分钟。将verbose设置为true ，我意识到几乎所有的时间都花在重新编译甚至没有改变的CSS和图像上。 webpack构build的输出是一个很长的列表，如下所示： ——— Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/background.jpg ——— Hash: 0f500227a855ef9eb67c Version: webpack 2.1.0-beta.8 Time: 68ms Asset Size Chunks Chunk Names .webpack.res.1504199219496_875923.js 132 kB 0 [emitted] main + 1 hidden modules ——— Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/AppAuthorized.css ——— Hash: 83f1c479b77c7539baeb Version: webpack 2.1.0-beta.8 Time: 549ms Asset Size Chunks Chunk Names .webpack.res.1504199221679_732531.js 23.2 kB 0 [emitted] […]

Webpack，sass-loader（或css-loader）在node_modules里嵌套文件导入。文件未find: 我想使用primercss框架作为sass。我正在使用webpack来构build我的应用程序。我已经下载了npm包并使用它导入它：@import "~primer-css/index.scss"; 。问题是，构build失败，这个错误： File to import not found or unreadable: primer-core/index.scss ，这是一个sub primer-css/index.scss文件。我认为这是一个有关webpack sass-loader或css-loader的问题，全栈跟踪如下： ERROR in ./node_modules/css-loader?{"modules":true,"minimize":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[name]__[local]"}!./node_modules/postcss-loader/lib?{"config":{"path":"/Users/vicaba/Projects/medself/medself-client/development/webpack/postcss.config.js"},"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true,"sourceMapContents":true}!./src/theme/theme.scss Module build failed: @import "primer-core/index.scss"; ^ File to import not found or unreadable: primer-core/index.scss. Parent style sheet: /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss in /Users/vicaba/Projects/medself/medself-client/development/node_modules/primer-css/index.scss (line 14, column 1) Error: @import "primer-core/index.scss"; ^ File to import not found or […]

将位于/ views文件夹中的index.html设为networking服务器上的login页面: 我想上传我的文件到一个networking服务器，在根文件夹中需要index.html来充当着陆页。我的代码现在的方式，我的index.html必须在/视图文件夹。有没有办法让它在index.html土地上，或者我必须将其移出并更改代码（如果是这样，如何？）我正在使用HTML / CSS，节点.js和expression。最后2不是很好，但'不得不'，因为我连接到一个数据库。有人可以帮我吗？我的文件夹结构如下所示： /public /styles styles.css /views index.html twitter.html server.js package.json 的script.js const express = require('express') const bodyParser = require('body-parser') const MongoClient = require('mongodb').MongoClient const path = require('path') const app = express() let db MongoClient.connect('mongodb://someuser:somepassword@cluster0-shard-00-00-fquoc.mongodb.net:27017,cluster0-shard-00-01-fquoc.mongodb.net:27017,cluster0-shard-00-02-fquoc.mongodb.net:27017/twitter?ssl=true&replicaSet=Cluster0-shard-0&authSource=admin', (err, database) => { if (err) return console.log(err) db = database app.listen(3000, () => { […]

NODE.JS如何使用node.js显示我的CSS文件夹内的名为CSS的文件夹，其中我的server.js和index.html位于文件夹之外: 所以，我是新的node js 。我的文件夹看起来像这样 NODE //my main folder here ->CSS //this is a folder ->IMAGES //this is a folder ->node_modules //this is a folder where intalled npms are stored ->index.html ->server.js 我希望我的style.css位于CSS folder中，使用node.js显示在我的index.html中。我将不胜感激您的帮助

当mixin函数是参数时，如何在Stylus中做透明的供应商混合？: 为border-radius等属性制作mixin很简单： vendor(name, args) -webkit-{name} args -moz-{name} args -ie-{name} args -o-{name} args {name} args border-radius() vendor('border-radius', arguments) #test border-radius 5px 但是如果我想为linear-gradient创build一个透明的供应商mixin呢？与border-radius不同， linear-gradient不是一个属性，而是一个参数，例如 #test background-image linear-gradient(top, #f00 0%, #00f 100%) 我想我必须创build一个名为background-image的mixin，并检查第一个参数是否是linear-gradient 。手写笔是否具有这种高级逻辑？如果是这样，我怎么能够完成我想要做的？感谢在这个问题上的任何帮助。