让 babel-loader 通过 webpack答案

【问题标题】：Have babel-loader go through webpack让 babel-loader 通过 webpack
【发布时间】：2018-11-08 20:32:16
【问题描述】：

我有一个 lerna monorepo，有两个包：marketing-site 和 button。我的营销站点包使用 webpack 配置，具有以下规则：

{
  test: /\.scss$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
      },
    },
    'sass-loader',
  ],
},
{
  test: /\.jsx?$/,
  include: [ // the include key does not seem to make a difference
    path.join(__dirname, '..'),
  ],
  use: 'babel-loader'
},

如果我在marketing-site/src/index.js 和import styles from '../button/src/styles.scss'，它可以工作。 scss 由sass-loader 和css-loader 处理。

但是，如果我 import '../button/src'，它本身有 import './style.scss'，我会得到一个 SyntaxError: Unexpected token。

同样，如果我将整个按钮文件夹移动到 marketing-site，一切正常。

有什么方法可以强制 webpack 使用它的加载器来处理根目录之外的另一个目录中的 scss 文件？

（不幸的是，我需要指定要在此 webpack 配置中使用的加载器，因为在同一个 monorepo 中有另一个项目使用不同的加载器集。我们想在两者之间共享这个 button 组件. 因此，在button/.babelrc 中使用插件是不够的。）

【问题讨论】：

标签： webpack babeljs babel-loader lerna

【解决方案1】：

看起来答案是错误的 externals: [ someFunction ] 错误地将这个 scss 导入标记为外部。

【讨论】：