1

使用 Webpack，从我的 css（或 scss）文件中，我试图访问 bower 包以导入 css 文件。使用 NPM 模块，这似乎很容易工作：

app.scss

@import "~normalize.css/normalize.css";
body {
  font-size: 12px;
}

在 Bower 的情况下，我一直在尝试使用resolve.alias它来使其正常工作，但没有成功：

webpack.config.js

  resolve: {
    alias: {
      'css-spinners' : '/bower_components/css-spinners/css/spinner'
    }
  }

app.scss

@import "css-spinners/three-quarters.css";
body {
  font-size: 12px;
}

这是错误消息：

ERROR in ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./src/styles/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./css-spinners/three-quarters.css in /Users/{project root folder}/src/styles
 @ ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./src/styles/app.scss 4:10-97

我不想通过mainin加载这个组件，bower.json因为我只想从组件中导入一个特定的文件。

有什么方法可以从凉亭组件中@import 一个 css 文件？

4

1 回答 1

0

我没有尝试过这个（对不起，不是开始答案的最佳方式！）但我过去可以使用resolve.modules数组从各种目录中解析。

而不是使用别名，您是否尝试过类似以下的操作？

webpack.config.js

  resolve: {
    modules: ['node_modules', 'bower_components'],
    extensions: ['.js', '.jsx', '.scss']
  },

应用程序.scss

@import "~css-spinners/css/spinner/three-quarters.css";
body {
  font-size: 12px;
}
于 2017-12-22T15:28:09.163 回答