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

Webpack不转换SCSS (ExtractTextPlugin)

Webpack是一个现代化的前端构建工具,它可以将多个前端资源(如HTML、CSS、JavaScript等)打包成一个或多个静态文件,以提高网页加载速度和性能优化。而SCSS是一种CSS预处理器,它可以增强CSS的功能,使得开发者可以使用变量、嵌套规则、混合等特性来编写更加灵活和易于维护的样式代码。

在Webpack中,可以使用ExtractTextPlugin插件来将SCSS文件转换为CSS,并将其提取到单独的CSS文件中。这样做的好处是可以将CSS与JavaScript分离,减小JavaScript文件的大小,提高网页加载速度。同时,提取的CSS文件可以进行压缩和缓存,进一步优化网页性能。

使用ExtractTextPlugin插件可以通过以下步骤来配置Webpack:

  1. 首先,安装ExtractTextPlugin插件:
代码语言:txt
复制
npm install extract-text-webpack-plugin --save-dev
  1. 在Webpack配置文件中引入ExtractTextPlugin插件:
代码语言:txt
复制
const ExtractTextPlugin = require('extract-text-webpack-plugin');
  1. 在Webpack配置文件的plugins选项中实例化ExtractTextPlugin插件,并指定提取的CSS文件名:
代码语言:txt
复制
plugins: [
  new ExtractTextPlugin('styles.css')
]
  1. 在Webpack配置文件的module.rules选项中配置SCSS文件的加载规则,并使用ExtractTextPlugin.loader来提取CSS:
代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }
  ]
}

通过以上配置,Webpack会将SCSS文件转换为CSS,并将其提取到名为styles.css的文件中。在HTML文件中引入该CSS文件即可使用样式。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性、安全、稳定的云服务器,可满足各种规模和需求的应用场景。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供高可靠、低成本的对象存储服务,可用于存储和管理各种类型的数据。详情请参考:腾讯云对象存储

请注意,以上答案仅供参考,具体的配置和产品选择应根据实际需求和情况进行。

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

相关·内容

Webpack4干货分享(二),使用loader处理scss,图片以及转换JS

它将包括如何处理css、scss、图片以及对老版本的JavaScript语言的转换。让我们开始吧! Webpack 4 入门教程继续 - 什么是loaders?...} ] }, } 就是这样,现在你可以引入scss文件了!...url-loader会把你的图片转换为base64格式的URI。如果你的图片文件很小,那么把它们直接引入到代码中会有更好的性能。这可以减少浏览器所发的请求数。...而相反,icon.png文件被转换为了base64 URI。 使用babel转译JavaScript 另一个流行的loader是 babel-loader。...总结 这一次我们学习了Webpack很有用的一个功能:loader。我们介绍了一些可用的loader。利用它们,我们在项目中添加上了对scss的支持。

90620

走近webpack(4)–css相关拓展

我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。   ...下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。先看看如何用webpack处理less。   ...不知道大家还记记的咱们在处理css文件的时候做过一件事情,也就是把css从js中分离出来,因为webpack打包是把css打包进js的,所以我们修改一下loader的配置方式,跟前面的css是一样的,...这里不再赘述,直接上代码: { test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader.../css/blue.scss';   同样的,把sass从js中分离,修改loader配置: { test: /\.scss$/, use: extractTextPlugin.extract

50310

走近webpack(4)--css相关拓展

我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。   ...下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。先看看如何用webpack处理less。   ...不知道大家还记记的咱们在处理css文件的时候做过一件事情,也就是把css从js中分离出来,因为webpack打包是把css打包进js的,所以我们修改一下loader的配置方式,跟前面的css是一样的,...这里不再赘述,直接上代码: { test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader.../css/blue.scss';   同样的,把sass从js中分离,修改loader配置: { test: /\.scss$/, use: extractTextPlugin.extract

1.1K100

Webpack Loader

style-loader默认行为,把CSS收集起来,通过标签作为外部资源引用: var ExtractTextPlugin = require('extract-text-webpack-plugin...');plugins: [ new ExtractTextPlugin('main.css') ] html-webpack-plugin用来生成入口HTML: var HTMLWebpackPlugin...与Plugin的区别 Loader只负责处理特定类型的依赖,“处理”包括解析,转换等,把Webpack不认识的东西(各种非JS依赖)转换成可打进bundle的JS Plugin更强大一些,能够跨Loader...Loader是用来转换依赖资源的函数,这个函数能够通过Loader API拿到bundle过程中的一些上下文信息(比如目标原始资源内容或前一个loader的输出、loader配置项等),以及调用Webpack...1支持通过3种方式声明Loader的应用顺序: loaders: [ { test: /\.scss$/, loader: 'style' }, { test: /\.scss$/, loader

1.1K30

Webpack编写自己的Loader和Plugin

以处理SCSS文件为例: SCSS源代码会先交给sass-loader把SCSS转换成CSS; 把sass-loader输出的CSS交给css-loader处理,找出CSS中依赖的资源、压缩CSS等;...获得Loader的options 在最上面处理SCSS文件的Webpack配置中,给css-loader传了options参数,以控制css-loader。...如果想让Webpack缓存该Loader的处理结果,可以这样: module.exports = function(source) { // 关闭该 Loader 的缓存功能 this.cacheable...// 如果执行 callback,运行流程将会一直卡在这不往下执行 callback(); }); 常用API 插件可以用来修改输出文件、增加输出文件、甚至可以提升Webpack性能、等等...以判断当前是否使用了ExtractTextPlugin为例,可以使用如下代码: // 判断当前配置使用使用了 ExtractTextPlugin, // compiler 参数即为 Webpack

68620

一波webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用...---- 2.常见的构建工具 目前的构建工具: Npm Script Grunt Gulp Fis3 webpack Rollup 构建工具需要做哪些事: 代码转换:将TypeScript编译成JavaScript...,将scss,less编译成css等 文件优化:将js,html,css,图片等压缩 代码分割:提取多个页面的公共代码,提取首屏不需要执行部分的代码让其异步加载 自动刷新:监听本地源代码的变化,自动重新构建...中一切皆模块,一个模块对应一个文件,webpack会从配置的entry中,递归找出所有的依赖的模块 loader:模块转换器,用于将模块的原内容按照需求转换成新内容 plugin:插件是 wepback...const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin')

77240

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

image.png 1.为什么需要webpack css预处理器如less、sass等浏览器不支持 部分低版本浏览器不支持es6语法,需要转换为es5语法,为浏览器使用 项目依赖过多,文件过多,需要将复杂的代码结构转换为细化.../dist loader - 处理浏览器不能直接运行的语言,可以将所有类型的文件转换webpack 能够处理的有效模块 ( 如上图 vue-loader用于解析和转换 .vue 文件,babel-loader...用于转换浏览器因兼容es6写法的转换 常见loader还有TypeScript、Sass、Less、Stylus babel-loader:解析 .js 和 .jsx 文件 tsx-loader:处理...ts 文件 less-loader:处理 less 文件,并将其编译为 css sass-loader:处理 sass、scss 文件,并将其编译为 css postcss-loader:// 解析CSS...= require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') const

1K30

Webpack4教程:使用loader处理scss,图片以及转换JS(第二章)

它将包括如何处理css、scss、图片以及对老版本的JavaScript语言的转换。让我们开始吧! ? Webpack 4 入门教程继续 - 什么是loaders?...} ] }, } 就是这样,现在你可以引入scss文件了!...url-loader会把你的图片转换为base64格式的URI。如果你的图片文件很小,那么把它们直接引入到代码中会有更好的性能。这可以减少浏览器所发的请求数。...而相反,icon.png文件被转换为了base64 URI。 使用babel转译JavaScript 另一个流行的loader是 babel-loader。...总结 这一次我们学习了Webpack很有用的一个功能:loader。我们介绍了一些可用的loader。利用它们,我们在项目中添加上了对scss的支持。

1.3K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券