sass-загрузчик webpack 3 не может импортировать файлы scss без относительного пути - PullRequest
Новая
       32

sass-загрузчик webpack 3 не может импортировать файлы scss без относительного пути

0 голосов
/ 13 сентября 2018

Я использую webpack 3.10.0 в проекте React, который начинается с create-react-app.Я пытаюсь настроить свою конфигурацию 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') };

1 Ответ

0 голосов
/ 13 сентября 2018

Используйте свойство конфигурации resolve.alias Webpack, чтобы определить место быстрого доступа для импорта. 

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'
  ]
}

Похоже, вы тестировали регулярное выражение для .scssфайлы без предшествующей .module части были неверными.

...