Question

我正在关注这些sass-loader instructions信函，但是webpack不会将我的.scss文件捆绑到css文件中。

我想我需要导入.scss文件 - 这在文档中没有提到过！ - 所以我把它添加到index.js：

import styles from '../scss/style.scss'

可悲的是，这没有任何效果。另外，我真的不明白你为什么要将css导入javascript？你最后得到一个未使用的变量......

Webpack配置

const path = require('path');

module.exports = {
  entry: './src/js/app.js',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "sass-loader"
        }]
      }]
  }
};

为什么webpack会忽略我的scss文件？

Answer 1

Webpack默认会忽略未使用的varible以提高性能。相反，请尝试import '../scss/styles.scss'加载您的scss文件。

Answer 2

我认为您误解了您正在使用的装载机实际上做了什么：

scss-loader将SCSS编译为CSS。
css-loader将CSS输出为字符串。
最重要的是 - style-loader 在运行时将CSS注入页面的头部。它不会在最终输出中创建任何文件！

如果你想将CSS放在一个单独的文件中（这在生产中是一个好主意，为了避免出现无格式内容），你需要使用extract-text-webpack-plugin。

即使在导入时，Webpack也会忽略scss文件

2 个答案: