Как импортировать таблицы стилей из node_modules в загрузчике sass без "~" - PullRequest
Новая
       24

Как импортировать таблицы стилей из node_modules в загрузчике sass без "~"

5 голосов
/ 28 февраля 2020

Я настраиваю свой экземпляр Storybook для загрузки стилей из моего приложения Rails, но он не смог загрузить импорт в моем файле main.scss, оба являются таблицами стилей из node_modules: 

@import 'react-table/react-table.css';
@import 'animate.css';

Я получил ошибки при попытке запустить мой экземпляр сборника рассказов: 

ERROR in ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss)
Module not found: Error: Can't resolve './animate.css' in '<my_project>/app/javascript/stylesheets'
 @ ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss) 4:40-111
 @ ./app/javascript/stylesheets/main.scss
 @ ./stories/1-Table.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss)
Module not found: Error: Can't resolve './react-table/react-table.css' in '<my_project>/app/javascript/stylesheets'
 @ ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss) 3:40-127
 @ ./app/javascript/stylesheets/main.scss
 @ ./stories/1-Table.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Это каталог части моего рабочего проекта: 

.
├── .storybook
│   ├── main.js
│   └── preview-head.html
├── app
│   ├── assets
│   │   └── stylesheets
│   │       ├── _base.scss
│   └── javascript
│       ├── packs
│       │   ├── application.js
│       │   └── server_rendering.js
│       └── stylesheets
│           ├── _variables.scss
│           └── main.scss
├── babel.config.js
├── postcss.config.js
├── stories
│   ├── 0-Welcome.stories.js
│   └── 1-Table.stories.js
├── yarn-error.log
└── yarn.lock

И это моя попытка в моей сборнике рассказов main.js, чтобы сообщить sass-loader, что я хочу импортировать файлы, не ставя знак «~», так как сторона веб-приложения не будет правильно загружать стили, поэтому нельзя изменять конфигурацию веб-пакета моего проекта. 

const path = require('path')

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            includePaths: [
              '../node_modules/animate',
              '../node_modules/react-table'
            ]
          }
        }
      ],
      include: [
        path.resolve(__dirname, '../node_modules'),
        path.resolve(__dirname, '../app/javascript/stylesheets'),
        path.resolve(__dirname, '../app/assets/stylesheets')
      ]
    })
    return config
  }
}

Я делаю это неправильно?

1 Ответ

2 голосов
/ 08 марта 2020

Если вы используете Webpack 4.x, то все, что вам нужно, это добавить пару псевдонимов в ваш файл конфигурации Webpack следующим образом: 

// Your Webpack config file
...

webpackFinal: async config => {
  config.module.resolve.alias = {
    'animate-css': path.resolve(__dirname, '../../../node_modules/animate.css'),
    'react-table': path.resolve(__dirname, '../../../node_modules/react-table-v6/react-table.css'),
  }

  ...
}

, а затем вы можете импортировать эти псевдонимы в свой файл конфигурации. main.s css: 

@import 'animate-css';
@import 'react-table';

Вам также необходимо удалить options из вашего sass-загрузчика. Я указал пути к node_modules , предполагая, что он находится на том же уровне, что и каталог app , также пакет react-table не содержит файл CSS, поэтому я указал v6.

...