我正在尝试从materialize.css中提取所需的css，以使用以下页面中的导航按钮：
我尝试从删除按钮中提取css：
<div id="btnDelete"><i id="btnDeleteI"></i></div>
但是按钮现在根本不起作用，悬停在上面不会改变它的颜色。
#btnDelete {
position: absolute;
top: 20px;
left: 20px;
}
#btnDeleteI {
border-bottom-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255);
border-top-color: rgb(255, 255, 255);
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-family: Material-Design-Icons;
font-size: 24px;
font-style: normal;
height: 55px;
letter-spacing: 0.5px;
line-height: 55.5px;
outline-color: rgb(255, 255, 255);
speak: none;
text-align: center;
text-transform: uppercase;
width: 55.5px;
z-index: 0;
perspective-origin: 27.75px 27.5px;
transform: matrix(1, 0, 0, 1, 0, 0);
transform-origin: 27.75px 27.5px;
border: 0px none rgb(255, 255, 255);
border-top: 0px none rgb(255, 255, 255);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 0px none rgb(255, 255, 255);
border-left: 0px none rgb(255, 255, 255);
border-color: rgb(255, 255, 255);
font: normal normal normal normal 24px / 55.5px Material-Design-Icons;
outline: rgb(255, 255, 255) none 0px;
}/*#btnDeleteI*/
任何有助于从上面链接中提取所需css以创建导航按钮的帮助将非常感激。
问题： 为什么你需要提取css，为什么不使用整个materialize.css文件？我无法使用整个文件，因为它导致对页面其余部分进行不必要的修改，无法修改。
更新＃1
我按照以下建议尝试解压缩。这破坏了materialize.css和按钮不再显示/正常运行。
更新＃2
SnappySnippet在css提取方面比在uncss方面做得更好，因为它允许你检查所需的元素，然后只显示相关的css。但是，即使SnappySnippet在从materialize.css中提取css并且导致按钮松开其图标和悬停效果时也不是100％准确。
更新＃3
我正在为这个问题打开奖金。请提供一个有效的fiddle example消除materialize.css中所有不需要的css以获得赏金奖励。对于已完成工作的项目，对外部资源的引用＆＃34; materialize.css＆＃34;应该没有了，所有与导航按钮有关的CSS都应该在jsfiddle的本地css部分。这是一个完整的起点：
https://jsfiddle.net/5fqg98xd/
此外，一切都应该像现在一样工作。例如，按钮应该像现在一样选择更改样式颜色。
答案 0 :(得分：1)
以下是使用280 css代码行的所有内容
访问https://jsfiddle.net/1dq74z80/
抱歉上面的小提琴宽度输出materilize css链接是https://jsfiddle.net/toadalskii/tx6pzph7/
或
获取以下代码
.teal {
background-color: #009688 !important;
}
.teal.darken-2 {
background-color: #00796b !important;
}
.orange {
background-color: #ff9800 !important;
}
.orange.darken-2 {
background-color: #f57c00 !important;
}
.btn-large, .btn-floating{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.btn-large:hover, .btn-floating:hover {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.material-icons {
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: 'liga';
-moz-font-feature-settings: 'liga';
font-feature-settings: 'liga';
}
@font-face {
font-family: "Material-Design-Icons";
src: url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="mdi-"], [class*="mdi-"] {
speak: none;
display: inline-block;
font-family: "Material-Design-Icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-rendering: auto;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
[class^="mdi-"]:before, [class*="mdi-"]:before {
display: inline-block;
speak: none;
text-decoration: inherit;
}
[class^="mdi-device-signal-cellular-"]:after, {
opacity: .3;
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: inline-block;
speak: none;
text-decoration: inherit;
}
.mdi-device-signal-cellular-null:after {
content: "";
}
.mdi-action-speaker-notes:before {
content: "\e677";
}
.mdi-editor-mode-edit:before {
content: "\e7a4";
}
.mdi-maps-place:before {
content: "\e899";
}
.mdi-social-share:before {
content: "\e8ed";
}
.mdi-device-signal-cellular-null:before {
content: "\e75f";
}
.mdi-action-delete:before {
content: "\e621";
}
.mdi-content-add:before {
content: "\e701";
}
.mdi-content-remove:before {
content: "\e716";
}
/ new content */
.disabled.btn-large, .btn-floating.disabled, .btn-large.disabled, .btn-large:disabled, .btn-large:disabled, .btn-floating:disabled {
background-color: #DFDFDF !important;
box-shadow: none;
color: #9F9F9F !important;
cursor: default;
}
.disabled.btn-large *, .btn-floating.disabled *, .btn-large.disabled *, .btn-large:disabled *, .btn-large:disabled *, .btn-floating:disabled * {
pointer-events: none;
}
.disabled.btn-large:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn:disabled:hover, .btn-large:disabled:hover, .btn-large:disabled:hover, .btn-floating:disabled:hover {
background-color: #DFDFDF;
color: #9F9F9F;
}
.btn i, .btn-large i, .btn-floating i, .btn-large i {
font-size: 1.3rem;
line-height: inherit;
}
.btn-large {
border: none;
border-radius: 2px;
display: inline-block;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: #fff;
background-color: #26a69a;
text-align: center;
letter-spacing: .5px;
transition: .2s ease-out;
cursor: pointer;
}
.btn-floating {
display: inline-block;
color: #fff;
position: relative;
overflow: hidden;
z-index: 1;
width: 37px;
height: 37px;
line-height: 37px;
padding: 0;
background-color: #26a69a;
border-radius: 50%;
transition: .3s;
cursor: pointer;
vertical-align: middle;
}
.btn-floating i {
width: inherit;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.6rem;
line-height: 37px;
}
.btn-floating:hover {
background-color: #26a69a;
}
.btn-floating:before {
border-radius: 0;
}
.btn-floating.btn-large {
width: 55.5px;
height: 55.5px;
}
.btn-floating.btn-large i {
line-height: 55.5px;
}
.btn-large {
height: 54px;
line-height: 56px;
}
.btn-large i {
font-size: 1.6rem;
}
.waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
will-change: opacity, transform;
transition: all .3s ease-out;
}
.btn-floating {
background-color: #f44336;
}
#btnSelect {
position: absolute;
top: 20px;
right: 20px;
}
#btnEdit {
position: absolute;
top: 20px;
right: 80px;
}
#btnDrawPoint {
position: absolute;
top: 20px;
right: 140px;
}
#btnDrawLine {
position: absolute;
top: 20px;
right: 200px;
}
#btnDrawPoly {
position: absolute;
top: 20px;
right: 260px;
}
#btnDelete {
position: absolute;
top: 20px;
right: 320px;
}
#btnZoomIn {
position: absolute;
top: 20px;
left: 20px;
}
#btnZoomOut {
position: absolute;
top: 80px;
left: 20px;
}
答案 1 :(得分：0)
您可以将UNCSS与grunt或gulp一起使用。 Here is a good guide to get started with UNCSS.
我在某些项目中使用gulp，这是代码：
var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('uncss', function() {
return gulp.src([
'node_modules/bootstrap/dist/css/bootstrap.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.css'
])
.pipe(uncss({
html: [
'http://localhost:8000/'
]
}))
.pipe(gulp.dest('css/'));
});
答案 2 :(得分：0)
如果我在你的情况下那么我会做以下 -
你尝试过这种方法吗？