Webpack 3.x 中 style/css/Sass loaders

时间:2022-10-25 09:34:46

上篇里已经通过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:

Webpack 3.x 中 style/css/Sass loaders

可以看到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 了 ,可以在页面中看到红色的段落了:

Webpack 3.x 中 style/css/Sass loaders

可以看到所有的样式都在<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),我们再看下页面的源码:

Webpack 3.x 中 style/css/Sass loaders

<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