webpack支持scss文件,webpack sass配置

安装依赖

yarn add sass-loader -D
yarn add node-sass -D

注意:这里是个坑,如果你在前端项目上配置webpack安装的是node-sass而不是sass,这两个依赖不要同时装,同时装的话webpack优先使用sass那么就会报错

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
};

高级技巧

如果你想用dart-sass正常情况下会报错,但是我们通过一些方法可以实现使用`dart-sass而不报错

方法:狸猫换太子
使用下面的方式安装dart-sass就可以正常使用了
yarn add node-sass@npm:dart-sass

你可能感兴趣的:(webpack,sass,前端)