使用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
我不想在main
中通过bower.json
加载这个组件,因为我只想从组件中导入一个特定的文件。
有没有办法从凉亭组件中@import css文件?
我没有尝试过这个(对不起,不是开始回答的最好方法!)但是我已经能够使用resolve.modules
数组从过去的各种目录中解析了。
而不是使用别名,你尝试过类似的东西吗?
webpack.config.js
resolve: {
modules: ['node_modules', 'bower_components'],
extensions: ['.js', '.jsx', '.scss']
},
app.scss
@import "~css-spinners/css/spinner/three-quarters.css";
body {
font-size: 12px;
}