webpack 3 sass-loader 无法导入没有相对路径的 scss 文件答案

【问题标题】：webpack 3 sass-loader can't import scss files without relative pathwebpack 3 sass-loader 无法导入没有相对路径的 scss 文件
【发布时间】：2019-02-17 14:58:32
【问题描述】：

我在以create-react-app 开头的 React 项目中使用webpack 3.10.0。我正在尝试调整我的 Webpack 配置，以便可以在没有相对路径的情况下导入 scss 文件。

例如@import ../../scss_variables/vars.scss 在myComponent.module.scss 中工作得非常好，但我希望能够简单地使用@import scss_variables/vars.scss。我认为以下配置可以解决问题，但经过多次尝试，我无法让@import 工作。我收到以下错误：

Module build failed:
@import "scss_variables/vars.scss";
^
File to import not found or unreadable: scss_variables/vars.scss.
in /path/to/app/src/components/myComponent/myComponent.module.scss (line 1, column 1)

文件结构：

app
-- config
---- webpack.config.dev.js
---- paths.js
-- src
---- components
------ myComponent
-------- myComponent.jsx
-------- myComponent.module.scss
---- scss_variables
------ vars.scss

webpack.config.dev.js:

  const paths = require('./paths');

  {
      test: /\.module\.scss/,
      use: [
          require.resolve('style-loader'),
          {
              loader: require.resolve('css-loader'),
              options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]',
                  includePaths: [paths.appSrc]
              },
          },
          'sass-loader'
      ]
  },
  {
      test: /^((?!\.module).)*\.scss/,
      use: [
          require.resolve('style-loader'),
          {
              loader: require.resolve('css-loader'),
              options: {
                  importLoaders: 1,
                  includePaths: [paths.appSrc]
              },
          },
          'sass-loader'
      ]
  },

paths.js:

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = { appSrc: resolveApp('src') };

【问题讨论】：

使用 webpack resolve 为你的 scss 文件的根路径设置一个别名。
这样的？解析：{ 别名：{ scss_variables$: path.resolve(__dirname, 'src/scss_variables') } }

标签： reactjs webpack create-react-app sass-loader

【解决方案1】：

使用 Webpack 的 resolve.alias 配置属性定义导入的快捷方式。

module.exports = {
  //...
  resolve: {
    alias: {
      scss_variables: path.resolve(__dirname, '../scss_variables/')
    }
  }
};

现在@import ../../scss_variables/vars.scss可以写成@import scss_variables/vars.scss。

编辑

在你的配置中使用它来代替你所拥有的：

{
  test: /\.module\.scss/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: '[name]__[local]__[hash:base64:5]',
        includePaths: [paths.appSrc]
      },
    },
    'sass-loader'
  ]
},
{
  test: /(?<!\.module)\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        includePaths: [paths.appSrc]
      },
    },
    'sass-loader'
  ]
}

您对没有前面 .module 部分的 .scss 文件进行的正则表达式测试似乎不正确。

【讨论】：

仍然收到相同的Module build failed 错误。对可能发生的事情有任何想法吗？注意：我最初写出的文件结构略有偏差。 scss_variables 生活在 src 之下。我已经在上面更正了。
我假设您更正了路径，但它仍然没有工作？
可能是你的 webpack.config.js 无效。对于您的第二条.scss 规则，您要测试哪些文件？以.scss 结尾但不是.module.scss 结尾的文件？
我相信就是这个意思。这个 webpack 配置直接来自 create-react-app。我对 webpack 不太熟悉。 resolve.alias 应该与 scss 文件/sass-loader 一起使用吗？文档中的所有示例都处理 JavaScript。
是的，resolve.alias 与 Sass 一起工作。我用更多信息更新了我的答案。