css 加载器的模块解析失败错误

Question

我正在尝试在我的组件 .js 文件中加载一个 css 文件，但这样做时我收到此错误：

./stories/styles.css 中的错误 模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。

我在 webpack.config.js 文件中添加了以下规则来处理加载程序，但仍然出现错误。

rules: [
      {
        test: /\.s?css$/,
        use: ['style-loader', 'raw-loader', 'sass-loader', 'css-loader'],
        include: [
          path.resolve(__dirname, '../css/'),
        ],
      },

我的 styles.css 文件如下所示：

.row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.row.dark {
    background: #303030;
}

.col {
    width: calc(100% - 400px);
    padding: 15px;
}

.row > .col:first-child {
    border-right: 1px solid #ccc;
    max-width: 400px;
}

我需要添加任何其他加载器吗？ 我什至尝试使用 import 而不是 require 来获取 styles.css 文件，但没有任何区别。

Answer 1

Webpack 加载器从右到左处理，您需要将配置更改为：

rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'raw-loader', 'css-loader', 'sass-loader'],
        include: [
          path.resolve(__dirname, '../css/'),
        ],
      },

• 我也不确定raw-loader 的用途在这里，因为它用于将文件作为字符串加载 - 你可能不需要它