Webpack 忽略 scss 文件，即使在导入时也是如此答案

【问题标题】：Webpack ignores scss files, even when importingWebpack 忽略 scss 文件，即使在导入时也是如此
【发布时间】：2018-03-29 07:01:53
【问题描述】：

我一直在关注这些 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 文件？

【问题讨论】：

require('../scss/style.scss'); 呢？
嗯，不，import 也可以。我想我找到了问题......上面的配置没有创建一个 .css 文件，但样式神奇地出现在 dist 项目中。我想 javascript 以某种方式注入样式......这对我来说都是非常不透明的...... :)
好吧，除非您使用样式化组件，否则无需使用 var 定义导入。直接使用 import '../../file/location.scss' 就足够了。然后在您的生产 webpack 配置中，您可以使用 css-loader 和 sass-loader 设置一个 ExtractTextPlugin，以将您的 scss 提取到资产文件夹中的 css 目录。
谢谢，让您头疼不已！为什么不在开发环境中使用 ExtractTextPlugin？
@Kokodoko 真的没有理由在开发模式下花费资源将 scss 提取到它自己的文件中。如果您在开发环境中启用了热重载，则必须每次都写入文件。让javascript加载它通常更快。但是，当在生产环境中的服务器上提供网站时，拥有 css 文件通常比通过 javascript 加载所有样式更有优势。

标签： webpack sass

【解决方案1】：

我认为您误解了您使用的加载程序的实际作用：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：