首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让scss / sass / css-loader不解析url调用?(WebPack内部)

在WebPack内部,可以通过配置scss/sass/css-loader来控制不解析url调用。具体步骤如下:

  1. 在Webpack配置文件中,找到对应的module.rules规则,即处理样式文件的规则。
  2. 在该规则中,找到对应的scss/sass/css-loader配置项。
  3. 在该配置项中,添加options选项,并设置其中的url参数为false,表示不解析url调用。

以下是一个示例的Webpack配置文件:

代码语言:txt
复制
module.exports = {
  // ...其他配置项

  module: {
    rules: [
      {
        test: /\.(scss|sass|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false // 不解析url调用
            }
          },
          'sass-loader'
        ]
      },
      // ...其他规则
    ]
  },

  // ...其他配置项
};

通过以上配置,scss/sass/css-loader将不会解析样式文件中的url调用,而是将其视为普通的字符串处理。这在某些情况下可能会有用,例如当样式文件中的url调用需要由其他方式进行处理时。

请注意,以上配置仅适用于Webpack内部的scss/sass/css-loader,对于其他工具或平台可能需要进行不同的配置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

多端多页面项目webpack打包实践与优化

loader webpack 能够去处理其他类型的文件,并将它们转换为有效模块。...因为webpack对于loader的调用是从右往左的,所以配置如下: { // 增加对 SCSS 文件的支持 test: /\.scss|\.css/, // SCSS 文件的处理顺序为先...当你的index.scss里@import了其他scss文件比如a.scss时,如果a.scss里使用了url(),且里面的路径是相对路径,那么在sass-loader 处理过后给css-loader处理时就会报错...但A.scss里的url()本来是以A.scss写的相对路径,这样合并又不对url()做处理的话,就导致了合并后无法定位到url()里的资源。...JS文件,那么如何把这个JS文件引入我们的html中去呢,手动引入无法监测到hash值的变化,肯定是OK的。

2.1K20

多端多页面项目Webpack打包实践与优化

loader webpack 能够去处理其他类型的文件,并将它们转换为有效模块。...因为webpack对于loader的调用是从右往左的,所以配置如下: { // 增加对 SCSS 文件的支持 test: /\.scss|\.css/, // SCSS 文件的处理顺序为先 sass-loader...当你的index.scss里@import了其他scss文件比如a.scss时,如果a.scss里使用了url(),且里面的路径是相对路径,那么在sass-loader 处理过后给css-loader处理时就会报错...但A.scss里的url()本来是以A.scss写的相对路径,这样合并又不对url()做处理的话,就导致了合并后无法定位到url()里的资源。...JS文件,那么如何把这个JS文件引入我们的html中去呢,手动引入无法监测到hash值的变化,肯定是OK的。

1.8K30

webpack】从vue-cli 2x 到 3x 迁移与实践

1.为什么需要webpack css预处理器如less、sass等浏览器不支持 部分低版本浏览器不支持es6语法,需要转换为es5语法,为浏览器使用 项目依赖过多,文件过多,需要将复杂的代码结构转换为细化...webpack 知道使用哪个模块,来作为构建其内部依赖图的开始 output - webpack 知道在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ....用于转换浏览器因兼容es6写法的转换 常见loader还有TypeScript、Sass、Less、Stylus babel-loader:解析 .js 和 .jsx 文件 tsx-loader:处理...ts 文件 less-loader:处理 less 文件,并将其编译为 css sass-loader:处理 sassscss 文件,并将其编译为 css postcss-loader:// 解析CSS...style-loader:将 css 注入到 DOM file-loader:将文件上的import / require 解析url,并将该文件输出到输出目录中 url-loader:用于将文件转换成

82941

WebpackWebpack4.x 常用操作 | 案例 | 相关构建工具

一些webpack概念 前面我们用一个小Case大家了解了一下Webpack。下面,我们在开始进一步完善我们的Case前,需要先知道一些webpack的先验知识/概念。.../src/index.js', }, } 入口配置,告诉webpack应该从哪个模块开始(上面从src/index.js这个模块),作为构建内部依赖图的开始。可以配置多个。...接着写小Case 加载CSS文件 安装:使用style-loader(把js中引入的css内容注入到Html 标签中,其依赖css-loader) 和css-loader(解析js中import...(scss)文件 、配置sourceMao 安装: npm i -D sass-loader node-sass webpack 添加loader module: { rules: [{...LESS 文件 sass-loader 加载和转译 SASS/SCSS 文件 postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件 stylus-loader 加载和转译

24110

webpack超详细教程!入门一篇就够了

所在的文件夹中使用命令行工具,输入 webpack 就可以实现打包了 5 webpack 如何运行?...就会解析执行这个配置文件,当解析执行完配置文件后,就得到了配置文件中,导出的配置对象 当 webpack 拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建 如果 webpack...,查找有没有对应的第三方 loader 规则 如果能找到对应的规则,就会调用对应的 loader 处理,这种文件类型 在调用 loader 的使用,是从后往前调用的 当最后一个 loader 调用文件,...','less-loader'] 11 处理 scss 文件 11.1 安装 npm i sass -D npm i sass-loader -D 11.2 使用 const path = require...'style-loader','css-loader','sass-loader'] } ] } } 12 处理 css 文件中的 url 地址 在默认情况下

8.8K52

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券