webpack加载 Sass 文件和创建source map

加载 Sass 需要sass-loader。（一定要安装了Sass才可以，如未安装，请先安装Sass）

安装

npm i -D sass-loader 
npm i -D node-sass

F:\git\webpack4>npm i -D sass-loader node-loader
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darw
in","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ node-loader@0.6.0
+ sass-loader@7.1.0
added 10 packages in 11.661s

使用：

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "sass-loader"
      }]
    }]
  }
};

或者(和css的对比)

const path = require('path');
module.exports = {
    entry:'./src/js/index.js',
    mode:'development',
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,"demo")
    },
    module:{
        rules:[
            {
                //test:/\.css$/,
                //use:['style-loader','css-loader'],
                test:/\.(sc|c|sa)ss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ],
        //noParse:/jquery|lodash/
    }
};

为 sass 文件注入内容：

如果你要将 Sass 代码放在实际的入口文件(entry file)之前，可以设置 data 选项。此时 sass-loader 不会覆盖 data 选项，只会将它拼接在入口文件的内容之前。

{
    loader: "sass-loader",
    options: {
        data: "$env: " + process.env.NODE_ENV + ";"
    }
}

注意：由于代码注入, 会破坏整个入口文件的 source map。 通常一个简单的解决方案是，多个 Sass 文件入口。

创建 Source Map

Source Map可以这样来理解：追踪来源，使用之后可以很清楚的定位

未使用source map的效果
使用source map的效果

css-loader和sass-loader都可以通过该 options 设置启用 sourcemap。

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader",
        options: {
          sourceMap: true
        }
      }, {
        loader: "sass-loader",
        options: {
          sourceMap: true
        }
      }]
    }]
  }
};