如何在没有“~"的情况下从 sass 加载器中的 node_modules 导入样式表 [英] How to import stylesheets from node_modules in sass loader without "~"

问题描述

我正在设置我的 Storybook 实例以从我的 Rails 应用程序加载样式，但它未能加载我的 main.scss 文件中的导入，两者都是来自 node_modules:

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

当我尝试运行我的故事书实例时收到错误:

 ./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)找不到模块:错误:无法解析<my_project>/app/javascript/stylesheets"中的./animate.css"@ ./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 同步 ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$@ ./.storybook/generated-entry.js@ 多 ./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./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)找不到模块:错误:无法解析<my_project>/app/javascript/stylesheets"中的./react-table/react-table.css"@ ./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 同步 ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$@ ./.storybook/generated-entry.js@ 多 ./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├──应用│ ├──资产│ │ └── 样式表│ │ ├── _base.scss│ └── javascript│ ├──包│ │ ├── application.js│ │ └── server_rendering.js│ └── 样式表│ ├── _variables.scss│ └── main.scss├── babel.config.js├── postcss.config.js├── 故事│ ├── 0-Welcome.stories.js│ └── 1-Table.stories.js├── yarn-error.log└── yarn.lock

这是我在 Storybook 的 main.js 中尝试让 sass-loader 知道我想导入文件而不将~"符号作为网络应用程序端将无法正确加载样式，因此无法更改我项目的 webpack 配置.

const path = require('path')模块.出口 = {故事:['../stories/**/*.stories.js'],插件:['@storybook/addon-actions', '@storybook/addon-links'],webpackFinal:异步配置 =>{config.module.rules.push({测试:/\.scss$/,用: ['样式加载器','css加载器',{loader: 'sass-loader',选项: {包括路径:['../node_modules/animate','../node_modules/反应表']}}],包括: [path.resolve(__dirname, '../node_modules'),path.resolve(__dirname, '../app/javascript/stylesheets'),path.resolve(__dirname, '../app/assets/stylesheets')]})返回配置}}

我做错了吗?

解决方案

如果您使用的是 Webpack 4.x，那么您只需要在 Webpack 配置文件中添加几个别名，如下所示:

//你的 Webpack 配置文件...webpackFinal:异步配置 =>{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'),}...}

然后你可以在你的 ma​​in.scss 中导入这些别名:

@import 'animate-css';@import '反应表';

您还需要从 sass-loader 中删除 options.我指定了 node_modules 的路径，假设它与您的 app 目录在同一级别，而且包 react-table 不包含 CSS 文件，所以我指定 v6.

I'm setting up my Storybook instance to load the styles from my Rails app but it failed to load the imports within my main.scss file, both are stylesheets from node_modules:

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

I received errors when I try to run my storybook instance:

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

This is the directory of part of my working project:

.
├── .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

And this is my attempt in my Storybook's main.js to let sass-loader know I want to import the files without putting the "~" sign as the web app side will not load the styles correctly so it's not an option to change the webpack config of my project.

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

Am I doing it wrongly?

解决方案

If you are using Webpack 4.x, then all that you need is to add a couple of aliases in your Webpack config file like this:

// 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'),
  }

  ...
}

and then you can import these aliases in your main.scss:

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

You also need to remove options from your sass-loader. I specified paths to node_modules assuming it is on the same level as your app directory, also package react-table contains no CSS file, so I specified v6.

这篇关于如何在没有“~"的情况下从 sass 加载器中的 node_modules 导入样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！