css - 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 的用途是什么，因为它用于将文件作为字符串加载 - 您可能不需要它