webpack2与Sass配置教程

安装Sass

通过Node.js的包管理器来安装，这里使用的是yarn

yarn add node-sass -g

node-sass -v
node-sass 4.5.1 (Wrapper) [JavaScript]
libsass   3.5.0.beta.2  (Sass Compiler) [C/C++]

使用SASS

这里以node-sass为例，在终端使用node-sass命令，对已写好的scss文件编译为css文件，如下

node-sass src/style.scss dest/style.css

如果你需要频繁修改scss和要立刻看到转换效果，则如下

node-sass src/style.scss dest/style.css -w

获取更多帮助，则如下

node-sass --help

配合webpack2

查看官方文档，有下面这段，设置如下

The sass-loader requires node-sass and webpack as peerDependency. Thus you are able to control the versions accurately.

打开你的package.json,在合适的位置加入下面的代码

"peerDependencies": {
  "node-sass": "^4.0.0",
  "webpack": "^2.0.0"
},

假设你已经安装好webpack2和webpack-dev-server,接着还需要先安装一些loader，如下，然后在终端执行下面命令

yarn add node-sass sass-loader css-loader style-loader --dev

style标签内联

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use:[ 'style-loader','css-loader','sass-loader'],
      },
    ],
  },
};

style标签外联

先安装插件

yarn add extract-text-webpack-plugin --dev

然后再修改配置webpack.config.js为

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: ExtractTextPlugin.extract({
          use:[ 'css-loader','sass-loader'],
          fallback: 'style-loader',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'index.css',
      disable: false,
      allChunks: true,
    }),
  ],
};

支持CSS Modules

修改配置webpack.config.js为

module: {
  rules: [
    {
      test: /\.(scss|css)$/,
      use: ExtractTextPlugin.extract({
        use:[
          {
            loader: 'css-loader',
            options:{
              modules:true,
              importLoaders:1,
              localIdentName:'[local]_[hash:base64:5]',
              sourceMap: true,
            },
          },
          {
            loader:'sass-loader',
            options:{
                sourceMap: true,
            },
          },
        ],
        fallback: 'style-loader',
      }),
    },
  ],
},

错误处理

如果你在运行项目的时候出现下面问题

Module build failed: Error: ENOENT: no such file or directory

由于yarn还未有rebuild相关的命令(有人已经提建议了)

这里的修复需要用到npm，执行npm rebuild node-sass就可以解决

参考

github.com/webpack-contrib/sass-loader/blob/master/package.json
github.com/sass/node-sass
webpack.js.org/loaders/sass-loader/

内容不多，至此~

本文由 Chakhsu Lau 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。