less-loader和sass-loader

less-loader

1.less-loader

自动将less转换为CSS

2.less-loader使用:

2.0安装less

npm install --save-dev less

2.1安装less-loader

npm install --save-dev less-loader

2.2配置less-loader

{
    test: /\.less$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "less-loader"
    }]
}

注意点:
因为loader是从右至左从下至上,所以必须先由less-loader处理往后才能交给其他loader处理

sass-loader

1.sass-loader

自动将scss文件转换为CSS

2.sass-loader使用:

2.0 安装sass-loader

npm install sass-loader node-sass webpack --save-dev
(如果有报错，推荐分开安装)
npm install --save-dev sass-loader
npm install --save-dev node-sass

2.1 配置sass-loader

{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
    }

安装sass-loader过程中遇到的问题

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.

解决方法：
node-sass 的数据源没设置
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

重新 npm install --save-dev node-sass