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

Posted 2023-02-22

【中文标题】webpack 3 sass-loader 无法导入没有相对路径的 scss 文件

【英文标题】：webpack 3 sass-loader can't import scss files without relative path

【发布时间】：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')

【参考方案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 一起工作。我用更多信息更新了我的答案。