webpack2与Sass配置教程

in Tutorials with 3 comments

安装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就可以解决

参考

内容不多,至此~

Responses
  1. geewonii

    太感谢了,刚用webpack 配置sass,懵懵懂懂,看了你的文章才配出来

    Reply
  2. Kay

    好像发现你现在的文章配图是每日Bing图片呢

    Reply
    1. @Kay

      就是,固定去那找图了

      Reply