Webpack 3.x 中 style/css/Sass loaders

最新推荐文章于 2024-09-13 22:02:52 发布
最新推荐文章于 2024-09-13 22:02:52 发布
阅读量7k 收藏 1
点赞数 2
分类专栏： webpack3-x 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stanxl/article/details/78623234
版权

上篇里已经通过html webpack plugin生成了html 模板，并且可以配置像title, hash, minify, 接下来分析如何将css也bundle 进去，webpack是通过loaders来完成，可以参考这里：https://webpack.js.org/concepts/loaders/，还有中文版本的：https://doc.webpack-china.org/concepts/loaders/，先安装css-loader:

npm install css-loader --save-dev

还需要安装style-loade (Adds CSS to the DOM by injecting a <style> tag)，一般它和css-loader一起使用，安装命令：

npm install style-loader --save-dev

安装完成后，可以在package.json中看到他们的版本信息：

  "devDependencies": {
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1"
  }

先在src目录下创建一个app.css：

body{
    background-color: green
}

然后将loader配置到webpack.config.js中，添加一个module对象：

module: {
        rules: [
          { test: /\.css$/, use: ['style-loader','css-loader'] }
        ]
}

特别注意的地方： [‘style-loader’,’css-loader’] 中的顺序不能写反，我最开始把css放在前面，结果就尴尬了，找了好久，才发现是顺序反了。

此时去运行index.html:

可以看到css样式已经bundle成功了。

下面研究sass(Syntactically Awesome Stylesheets)在webpack中的应用：
https://www.npmjs.com/package/sass-loader
这里还有一些介绍：
http://www.ruanyifeng.com/blog/2012/06/sass.html

先安装 sass-loader:

npm install sass-loader node-sass --save-dev

安装完成就可以使用了，将sass-loader添加到webpack.config.js的module对象中，放在最后：

module: {
        rules: [
          { test: /\.css$/, use: ['style-loader','css-loader','sass-loader'] }
        ]
}

同样在package.json可以看到多了sass-loader的dependency:

  "devDependencies": {
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1"
  }

先把app.css 文件改成 app.scss格式的文件，在其中加一些sass code :

body{
    background-color: green;
    p {
        color: red;
    }
}

再把app.js中的app.css 也要改成 app.scss：

const csss = require('./app.scss');

再把webpack.config.js中的module改成下面：

module: {
        rules: [
          { test: /\.scss$/, use: ['style-loader','css-loader','sass-loader'] }
        ]
    },

更改完成后，重新build，sass就被完全的解析成纯净的css 了 ,可以在页面中看到红色的段落了：

可以看到所有的样式都在<head>里面，我们可以尝试将这样样式通过引入外部文件的方式引进来，像这种模式：

<link rel="stylesheet" href="...." />

extract-test-webapck-plugin可以做到，先安装这个dependency:

npm install --save-dev extract-text-webpack-plugin

我用的是webpack 3，不同的版本命令也不同，可以参考这里：https://www.npmjs.com/package/extract-text-webpack-plugin，安装完成后，可以webpack.config.js中看到：

  "devDependencies": {
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1"
  }

接下来在webpack.config.js，中声明：extract-text-plugin:

var ExtractTextPlugin = require("extract-text-webpack-plugin");

再把module对象改成：

module: {
        rules: [
          { test: /\.scss$/, 
            use: ExtractTextPlugin.extract({
              fallback:"style-loader",
              use: ['css-loader','sass-loader'],
              publicPath: "/dist"  
            })}
            //['style-loader','css-loader','sass-loader']
        ]
}

参考它的版本的breaking change:https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change

再在plugins对象中添加下面的代码：

new ExtractTextPlugin({
          filename: "styles.css",
          disable: false,
          allChunks: true
})

其中的styles.css就是我们的目标css。重新build之后，styles.css文件生成到dist目录下，extract text plugin会把.scss文件解析成纯净的css文件（styles.css），我们再看下页面的源码：

从<head>可以看出<link rel="stylesheet" href="...." />,达到预期效果，再看下这个时候的styles.css文件：

body {
  background-color: green;
}
body p {
  color: red;
}
// pure css

参考地址：
https://doc.webpack-china.org/loaders/sass-loader/
https://webpack.js.org/guides/migrating/
https://github.com/webpack-contrib/extract-text-webpack-plugin

Stangor
关注
专栏目录
vue2.x webpack3安装sass的坑
weixin_40793759的博客
05-17 1562
类似于这样的报错： 通常解决办法（可查看官网）： npm install -D sass-loader sass 如果不是用的vuecli，还要配置如下（webpack.base.cnofig.js）: module: { rules: [ //..., { test: /\.scss$/, loaders: [ 'vue-style-loader', 'css-loader',
Webpack3.x 通过Webpack加载Bootstrap的CSS/Scss/JS 及更改CSS样式
Stan的专栏
11-27 2930
如何用webpack去加载bootstrap的css/scss 及JS呢，先准备一个bootstrap 模板b-index.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
sass-loader 安装与配置指南
最新发布
gitblog_07925的博客
09-13 613
sass-loader 安装与配置指南 sass-loader Compiles Sass to CSS 项目地址: https://gitcode.com/gh_mirrors/sa/sass-loader ...
webpack3最新版本配置研究（二）loader
Wz1135640的博客
01-30 551
接上面的loader url-loader  现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求  npm install url-loader file-loader –save-dev //修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的 html lang="en"> head> m
webpack随笔03-sass
uikoo9的专栏
03-22 1211
【前言】 sass，css预编译语言的一种，还有less，stylus等，详见：Sass: Syntactically Awesome Style Sheets 简单来说就是自定义了一种语言，可以很方便的写css，并且最终会编译为css文件， 简单对比一下， less，由于bootstrap使用，所以用的人比较多，但是没有sass好用 sass，比较好用，之前基于ruby的问题，sass缩进的问题都有改善 【几种版本】 在官网上可以看到sass有几种版本 dart sass，这...
style-loader、css-loader、less-loader处理less样式文件/style-loader、css-loader、sass-loader处理scss样式文件
mobin518的博客
02-15 1718
less样式文件  :步骤同css样式的处理 1、cnpm i less-loader -D 安装less-loader加载器；cnpm i less -D 安装这个依赖； 2、配置规则：{test:/\.less$/,use:['style-loader','css-loader','less-loader']}  需要css样式的2个加载器；     scss样式文件  :步骤同cs...
webpack3.x+vue2.x+sass项目中，sass提取全局引用
sinat_27514587的博客
11-03 714
此文首发于 https://lijing0906.github.io 接近年底，工作没有那么忙，业余时间就比较多了，就想着把小demo整合到一起，自己搭建一个项目。 在网上找了两篇博客作为参考：在vue中使用sass的配置的方法、vue引入sass全局变量 基础依赖包安装 安装sass-loader和node-sass(sass-loader依赖于node-sass)。-D是–save-dev的缩...
Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源
youyacoder的博客
07-15 743
主要讲解webpack 5 如何高效处理CSS 资源、scss/sass 资源、less 资源、 stylus 资源
webpack 处理css-load版本太高报错问题
颠覆我的整个世界，只为摆正你的身影
08-27 3512
ERROR in ./src/style.css Module build failed (from ./node_modules/_css-loader@4.2.2@css-loader/dist/cjs.js):Error:Cannot find module ‘cssesc’ 问题描述 npm install -D css-loader style-loader npm install -D node-sass sass-loader npm install -D less less
【react笔记】关于在webpack.config.dev.js和webpack.config.prod.js里配置antd
supercolorpower的博客
12-21 8342
在.babelrc中配置antd的方法移步官网https://ant.design/docs/react/introduce-cn 另一种方法的前提是我们已经将配置文件暴露出来了。暴露方法https://blog.csdn.net/weixin_41606276/article/details/85123919 因为我的脚手架版本较高，所以现在网上的方法都不适用。在我的不断尝试下，终于配置成功...
webpack+vue+sass项目中，sass提取全局引用
weixin_34269583的博客
12-19 1113
此文首发于 lijing0906.github.io 接近年底，工作没有那么忙，业余时间就比较多了，就想着把小demo整合到一起，自己搭建一个项目。 在网上找了两篇博客作为参考：在vue中使用sass的配置的方法、vue引入sass全局变量 基础依赖包安装 安装sass-loader和node-sass(sass-loader依赖于node-sass)。-D是--save-dev的缩写，依赖包在开...
6使用 loader 处理 CSS 和 Sass
weixin_34391854的博客
12-06 198
1. 什么是 loader 官方的解释是这样的： loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。load...
webpack3 css,webpack 3 - CSS Modules, SASS + Webpack3 + React - Stack Overflow
weixin_29777019的博客
08-04 129
I am struggling with setting up my webpack config properly... I tried many things without result. When I am trying to compile bundle I receive loads of errors regarding path to .svg files however the ...
webpack css-loader style-loader scss-loader cssloader模块化
weixin_45002586的博客
11-15 703
webpack css-loader style-loader scss-loader cssloader模块化
webpack配置scss loader
liyananweb的博客
11-30 2420
请记住，这些配置可能需要根据你的具体项目需求进行调整。如果你使用的是如 Create React App 或 Next.js 这样的构建工具，它们可能已经内置了对 Sass 的支持，你可能不需要手动更改 Webpack 配置。如果你想使用 CSS Modules（这允许你将 CSS 类名局部化，以避免全局冲突），你可以调整。如果你想将 CSS 提取到单独的文件中，而不是将它们注入到 JavaScript 中，你可以使用。文件中，你需要添加一个规则来告诉 Webpack 如何处理。的替代品，更快且更可靠）。
webpack 3/4踩坑，我太难了，从安装、卸载、到使用，各相应的版本号，sass-loader报错-版本的原因，webpack -v 不识别，没卸载干净...
09-04 5017
-先说卸载： wabpack@4对应的每个插件的版本号都在最后　 1 全局安装的话，npm uninstall webpack -g 有时候并不能卸载干净， 2 webpack -v 可判断是否安装成功，全局安装的可以用这个判断，局部安装的不能 3 卸载不干净导致后面安装其他的都webpack -v识别不了 4 　 先uninstall...
《六》Webpack 中处理 CSS 模块的 Loader
花铛
08-31 196
也是借助了 less 工具来完成这个功能的，会自动加载 less 的安装包并对其进行使用。，创建了一个 style 标签，将 CSS 文件的样式放到了这个标签中，然后通过页内样式的方式将样式插入到了页面中。在加载 CSS 模块时，webpack 并不知道如何对其进行加载，必须指定对应的 loader 来完成这个功能。后，再去运行 webpack 命令进行打包，会发现报错信息不见了，样式在页面中也生效了。此时，再去运行 webpack 命令进行打包，会发现 less 样式在页面中生效了。
Webpack4 配置 scss Loader
liujun2son
07-17 4891
1.配置 scss Loader SCSS 可以让你用更灵活的方式写 CSS。 它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素。SCSS 又叫 SASS，区别在于 SASS 语法类似 Ruby，而 SCSS 语法类似 CSS，对于熟悉 CSS 的前端工程师来说会更喜欢 SCSS。 使用 SCSS 可以提升编码效率，但是必须把 SCSS 源代码编译成可以直接在浏览器...
ERROR in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss&) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Error: Cannot find module 'sass'
06-07
3. 确认你正确引用了 `sass-loader`，例如在 HelloWorld.vue 中引用 SCSS 文件的方式应该为： ``` <style lang="scss"> /* Your SCSS code here */ </style> ``` 如果你仍然无法解决这个问题，可以提供更多的代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值