作者:懒羊羊2502880053 | 来源:互联网 | 2023-02-03 03:04
我试图通过npm“ mdi”包将材料设计图标添加到我的项目中。但我有问题
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/public');
var APP_DIR = path.resolve(__dirname, 'src');
var cOnfig= {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080/',
APP_DIR + '/index.jsx'
],
output: {
path: BUILD_DIR,
filename: 'bundle.js',
publicPath : '/'
},
devServer : {
historyApiFallback: true,
contentBase: 'src/public/'
},
module: {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : ['react-hot-loader', 'babel-loader']
},
{
test: /\.s?css$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\??\#?v=[.0-9]+)?$/,
loader: 'file-loader?name=/fonts/[name].[ext]',
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
resolve: {
extensions: ['.js', '.jsx']
}
};
//dev server
module.exports = config;
我的App组件调用主scss文件
import './scss/App.scss';
然后在该App.scss文件中,导入一个settings.scss和materialdesignicons.scss文件
settings.scss
$mdi-font-path: "fonts/";
应用程序
@import "./settings.scss";
@import '~mdi/scss/materialdesignicons.scss';
该项目通过main.scss文件导入。
settings.scss
$mdi-font-path: "fonts/";
每当我尝试构建时,都会出现错误,试图弄清楚如何处理webfont项目。
ERROR in ./~/css-loader!./~/sass-loader!./src/scss/App.scss
Module not found: Error: Can't resolve './fonts//materialdesignicons-webfont.eot?v=1.9.32' in '//app/src/scss'
@ ./~/css-loader!./~/sass-loader!./src/scss/App.scss 7:129-189
@ ./src/scss/App.scss
@ ./src/App.jsx
@ ./src/index.jsx
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080/ ./src/index.jsx
我以为文件加载器可以处理那些文件。似乎是因为它正在导入scss文件,所以它不使用文件加载器部分,而是尝试使用sass / css加载器。
我试图弄清楚该如何做。
1> Roman..:
我的方法包括三个步骤:
安装材料设计图标包
npm install material-design-icons
将material-icons.css文件导入.less或.scss文件/项目
@import "~/node_modules/material-design-icons/iconfont/material-icons.css";
将推荐的代码包含到reactjs .js文件/项目中
close
2> ShabbY..:
文件加载器确实把那些文件弄糟了。您遇到的问题是找不到该文件,因此它永远不会到达文件加载器。
materialdesignicons-webfont.eot是您的node_modules的一部分,但是当我现在考虑时,它应该位于./app/src/scss/fonts/materialdesignicons-webfont.eot
如果您只是删除自己的$ mdi-font-path定义,我希望这会起作用。
更新:
$mdi-font-path: '~mdi/fonts/';
@import '~mdi/scss/materialdesignicons';