scss - webpack如何提取vue组件的css到独立文件中
问 题 现在是单独import进来的样式文件可以单独提取出来,而在vue组件中的样式还是跟js打包到一块儿的,要怎么才能把vue组件中的样式也单独提取出来放到一个外部的样式文件中呢? 完整配置信息,可以将Vue组件的CSS提取出来了,webpack.config.js: var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './js/main.js', output: { path: __dirname, filename: '../static/js/app.js', }, module: { loaders: [ { test: /\.vue$/, loader: 'vue', }, { test: /\.js$/,
674 2022-07-19
编程技术问答社区
scss - sass可以传一个URL地址到mixin中吗?
下面这种方式不行,用了#{$file}这种方式也不行。 @mixin IE-filter-scale($file){ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{$file}, sizingMethod='scale'); } .theme-logo{ background:transparent url(../imgs/hpd_003.png) center center no-repeat; width:132px; height:40px; background-size:100%; @include IE-filter-scale(../imgs/hpd_003.png); margin-left: 59px; } [15:28:49] error happybao/stc/base/_foot.scss (Line 69: Invalid C
232 2022-07-19
编程技术问答社区
css - 如何使sass文件中的某条声明无效化?
问 题 以下是Bootstrap 4.0 sass源码中关于轮播“carousel”的一部分: .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: $carousel-control-width; font-size: $carousel-control-font-size; color: $carousel-control-color; text-align: center; text-shadow: $carousel-text-shadow; opacity: $carousel-control-opacity; // We can't have this transition here because WebKit cancels the carousel // animation if you trip this whil
212 2022-07-19
编程技术问答社区
sass - 如何让scss编译时将@media合并到整个css的最后
问 题 现在在scss中使用@media会编译成多个@media eg: .a { @media screen and (max-width: 320px) { // css } } .b { @media screen and (max-width: 320px) { // css } } 会编译成 @media screen and (max-width: 320px) { .a { // css } } @media screen and (max-width: 320px) { .b { // css } } 如何能编译成 @media screen and (max-width: 320px) { .a { // css } .b { // css } } 这样可以让整个css更小嘛~ 解决方案 自己找到方法了 https://gith
1204 2022-07-19
编程技术问答社区
sass - scss中的import加波浪号是什么意思?
问 题 @import "~bootstrap/dist/css/bootstrap.min.css"; @import "~font-awesome/css/font-awesome.min.css"; @import "/assets/css/primeng-themes-my/primeng.min.css"; @import "/assets/css/primeng-themes-my/themes/bootstrap-my/theme.css"; 前两个import的文件地址前面加入波浪线(~)是什么意思啊? 解决方案 node_modules 目录下面的
1314 2022-07-19
编程技术问答社区
html - css样式多个选择器如何简写为一个?
问 题 .level-1 { padding-left: 10px; } .level-2 { padding-left: 20px; } .level-3 { padding-left: 30px; } .level-4 { padding-left: 40px; } .level-5 { padding-left: 50px; } .level-6 { padding-left: 60px; } 能不能简写一下?或者用预处理器scss怎么实现呢? 解决方案 SASS @for $i from 1 to 6 { .level-#{$i} { padding-left: #{$i * 10}px; } }
152 2022-07-17
编程技术问答社区
前端 - scss @import多层导入
这是我的目录结构 这是我base里面的_all.scss,这里面导入了generic.scss 这是generic.scss 这是定义变量的文件,在utilities/init-variables.scss 这是xe.scss,这个文件导入了每个文件夹中的_all scss说@import会将导入的文件整合到一个文件中,但是我使用gulp构建的时候报出了generic。scss的变量没有定义 求解这个怎么解决啊
448 2022-07-17
编程技术问答社区
vue.js - .vue组件使用scss问题
写成如上图所示时,程序正常,可是Atom编辑器会有警告 当改成style lang="scss"后,编辑器不报警告,可是程序就挂了 why???
362 2022-07-17
编程技术问答社区
css - sass中为什么::after和::before继承不到属性?
问 题 &.classic{ border-left:none; padding:1em .6em; text-indent:2em; position:relative; %ab{ font-size:3.5em; color: #d2d4d2; text-indent:0; position:absolute; line-height:1; } &:before{ content:'\201C'; @extend %ab; top:.12em; left:-.4em; } &:after{ content:'\201D'; @extend %ab; bottom:-.38em; right:-.48em; } span{ @ext
1242 2022-07-17
编程技术问答社区
javascript - flexible.js插件使用疑问?
问 题 如果是用flexible.js设置font-size的大小,那么在写元素大小的时候该怎么写,是按照font-size:64px去继承写rem,参照尺寸是哪个? 还有我之前写手机端用的是媒体查询+css的方式, 用sass定义了px转换成rem的方法,可以动态计算。 但是现在改用这个插件,那么px转换rem的方法改怎么修改才有用。 @function pxTorem($px){ //$px为需要转换的字号 @return $px / $browser-default-font-size * 1rem; } 解决方案 15年初的时候就开始用类似方案,配合 SASS 写个函数,其中 $w 为设计稿的宽除以10。 // rem 基准值,psd宽为750px $w: 75; @function rem($n) { @return ($n/$w) + rem; } 为你的 SCSS 文件引入上面的函数后,你在写代码时就只要量取PSD中的真实
212 2022-07-17
编程技术问答社区
css - sass 如何遍历数组对象
问 题 $stars: (size: '40px', left: '22px', top: '97px'), (size: '32px', left: '42px', top: '70px'), (size: '31px', left: '464px', top: '273px'), (size: '28px', left: '240px', top: '402px'), (size: '25px', left: '289px', top: '557px'); @for $i from 1 through 5 { &:nth-child(#{$i}) { width: #{$stars[$i].size}; height: #{$stars[$i].size}; left: #{$stars[$i].left}; top: #{$stars[$i].top}; } } 如何正
978 2022-07-17
编程技术问答社区
sass - 请问scss import '~/bootstrap/xxx'中~是属于什么的语法?
问 题 最近一下子新学好多前端工具,在引入boostrap-sass的时候看到有人贴出这段代码 $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss"; 请问这里开头的这个~是什么意思? 解决方案 这是用webpack打包编译时指代当前项目下node_modules包里的样式文件,只在样式文件@import时这么用。
288 2022-07-17
编程技术问答社区
vue.js - 使用vue-cli搭建的项目webpack无法处理sass中的iconfont
在app.vue中引入 @import "assets/styles/main.scss" css可以,换成scss文件就报错。 These relative modules were not found: * ../fonts/bootstrap/glyphicons-halflings-regular.eot in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3
850 2022-07-17
编程技术问答社区