- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我尝试在我所有的 Vue SFC 中访问一个 scss 文件时,样式被复制导致大型 css 包和开发工具在样式调试时崩溃
我正在使用 Webpack 4 和 webpack-dev-server 来构建和运行支持热重载的开发服务。我没有使用 Vue CLI 创建项目。
我有很多 SFC (~50) 和一个包含全局样式和变量的 sass 文件 (index.scss)。我需要能够在我的 SFC 中使用 index.scss 中的样式和变量。我目前的方法是在我的 Webpack sass-loader 中使用数据选项。
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.scss$/,
use: [
isDev ? { loader: 'vue-style-loader', options: { sourceMap: hasSM }} : {loader: MiniCssExtractPlugin.loader },
{
loader: 'css-loader',
options: {
sourceMap: hasSM
}
},
{
loader: 'sass-loader',
options: {
sourceMap: hasSM,
data: `@import "@/styles/index.scss";`
}
}
]
}
]
}
这是成功的,但是我注意到我的 index.scss 样式包含在每个组件中。使用 devserver 进行本地开发几乎是不可能的,因为 50 个组件之间的重复是如此之大,而 devtools 无法应对。当我构建以提取 css 时,我可以看到重复项并且 app.css 文件很大。我可以使用缩小过程进行部署,但这根本不适合本地开发。
我尝试了其他方法,例如在我的 main.js 文件中使用 import ./styles/index.scss
从 sass-loader 中删除数据选项,但是这无法构建,因为它可以'找到我在 SFC 中使用的变量。
请查看我的代码片段,大致了解我是如何设置加载程序的。我觉得好像有更好的方法来做到这一点,无论是使用不同的加载器/插件,我都愿意使用不同的方法
最佳答案
我设法解决了。本质上,当每个 Vue 组件都被处理时,sass-loader 正在导入我的全局 sass 文件,其中包括变量、混合和最重要的我的样式。我的 main.js 中的 import 语句不起作用,因为在处理组件时变量和混合不可用。
所以我只需要在我的组件中导入变量和混合,样式可以是外部的并包含在我的 main.js 中。由于 Variable 和 Mixins 仅在需要时被包含(使用 @include 语句),因此没有重复,因为它正在编译为 CSS。
所以我将我的样式和变量以及 Mixins 拆分为单独的变量
样式 => styles.scss
变量和混合 => variableMixins.scss
然后 在我的 main.js 中导入 ./styles/styles.scss
我的 webpack sass-loader 会像
{
loader: 'sass-loader',
options: {
sourceMap: hasSM,
data: `@import "@/styles/variableMixins.scss";`
}
}
关于vue.js - 在不与 Webpack 重复的情况下在 Vue SFC 组件中导入 SCSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53869033/
以下代码在使用 TypeScript 编译时会抛出错误。 import React, { SFC } from "react" import { Link } from "react-router-d
我正在向我们的 vue 代码库添加单元测试,发现很难测试元素的可见性。 我照常渲染组件,并按照测试库文档示例中的建议进行渲染,但样式未应用于 DOM 调试(使用 screen.debug)。有什么线索
我有一个 R sf 对象: library(sf) library(magritr) g1 = structure(list(ele = c(1819.80249, 1821.150879, 1825
我们的产品有多个客户,每个客户都有自己的客户特定修改。 有没有办法在 SFC 的 Vue2 模板中根据构建环境变量在构建时有条件地包含或排除其他组件? 看起来我可以使用类似 webpack-condi
假设 t是: t t Geometry set for 2 features geometry type: POLYGON dimension: XY bbox: x
我正在编写一个 powershell 脚本,其中多个命令输出显示在窗口中并附加到文件或变量中。在我使用 sfc 命令之前它工作正常。当通过管道传输或重定向时,输出是“损坏的”: > sfc /? Vé
我用过 ReactDOM.createPortal在有状态组件的 render 方法中,如下所示: class MyComponent extends Component { ...
我是新来的,我想写一个执行命令的C++源代码: sfc.exe /scannow 但它不起作用。 Windows 资源保护无法启动修复服务。 我是一名学生,我上 10 年级,我在学校没有计算机科学,所
每当我向我的 SFC ~home.vue 中的 html 添加一行额外的 html 时,我都会收到此错误。请参阅以下错误: > webpack --mode development Hash: 1e4
我的问题如下:在 chrome devtools 中调试时将鼠标悬停在变量上,这就是我得到的: 在开发工具控制台中: 有人知道为什么会这样吗?这真的很烦人,因为使调试过程更加麻烦!!!有什么解决办法吗
我有一个遗留项目,想通过 CDN 开始使用 Vue.js 单文件组件。我确实遇到了一些插件,例如 https://github.com/FranckFreiburger/vue3-sfc-loader
所以问题是我有一列“位置”,它是一个列表列表。嵌套列表的长度为 2,并且在索引 1 处都有一个点的纬度值,在索引 2 处都有一个点的经度值。因为我想从本专栏创建一个 sfc 对象,所以我考虑将每个嵌套
我处于这样一种情况,我必须在法律上将版权声明添加到我的文件顶部,同时我知道如何在 template 中发表评论。 , script或 style ,我找不到关于如何在这些之外执行此操作的文档。 根据文
我正在使用 Laravel 5.8 和 Vue 2.6,并尝试在我的单个文件组件中使用图像文件的相对路径。我已查看 How to import and use image in a Vue singl
我有两种使用我的应用程序的模式,一种是嵌入式模式,一种是非嵌入式模式。对于嵌入式(想想 iframe)模式,我不想显示站点页眉和页脚。我尝试在 App.vue 中使用 v-if 和 v-else,但
我正在尝试将上下文传递到 SFC,如 react docs 中所述,但是 typescript 对此很生气。我转载了the issue on codesandbox.io ,并在下面内联了相关信息。所
我正在做一个应用程序,我需要在 Vue JS 的单个文件组件中提取样式标记内的 CSS。 所以我有这个基本模板: export default { name: 'Hel
我有一个 react 函数,我正在传递一个对象数组作为 Prop 。当组件渲染时,该数组被嵌套到同名的对象中。 为什么要嵌套?我可以做些什么来将其强制返回数组吗? 这是代码(以及笔的链接( https
因此,您可以指定类型 React.FC到一个变量,以便将其理解为 React 无状态功能组件,如下所示: //Interface declaration interface ButtonProps {
我有一个 vue/sfc/webpack/vue-loader 应用程序,我直接在 SFC 中使用 Bootstrap (通过“导入”)和组件样式。现在,vue-loader 总是在组件样式之后包含
我是一名优秀的程序员,十分优秀!