[英]Webpack/Angular - Materialize not loading
I downloaded a starter Asp.net & Angular2 project here . 我在这里下载了一个启动程序Asp.net&Angular2项目。 I'm trying to add materialize to my project, but it doesn't seem to be loading when I run the project.
我正在尝试将物化添加到我的项目中,但是当我运行该项目时它似乎没有被加载。 How do i configure materialize properly with webpack and/or Angular, does it require a special loader?
如何使用webpack和/或Angular正确配置物化,是否需要特殊的加载器? Thanks guys, im new to webpack.
谢谢大家,我是webpack的新手。
Package.json Package.json
{
"name": "First",
"version": "0.0.0",
"devDependencies": {
"aspnet-webpack": "^1.0.6",
"bootstrap": "^3.3.6",
"css-loader": "^0.23.1",
"expose-loader": "^0.7.1",
"extendify": "^1.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"jquery": "^2.2.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.0",
"ts-loader": "^0.8.1",
"typescript": "^1.8.2",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-hot-middleware": "^2.10.0"
},
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/platform-server": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"angular2-universal": "^0.104.5",
"aspnet-prerendering": "^1.0.2",
"css": "^2.2.1",
"es6-shim": "^0.35.1",
"isomorphic-fetch": "^2.2.1",
"materialize-css": "^0.97.7",
"preboot": "^2.0.10",
"rxjs": "5.0.0-beta.6",
"webpack-externals-plugin": "^1.0.0",
"zone.js": "^0.6.12"
}
}
wepback.config.vendor wepback.config.vendor
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';
module.exports = {
resolve: {
extensions: [ '', '.js' ]
},
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{ test: /\.css/, loader: extractCSS.extract(['css']) }
]
},
entry: {
vendor: [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'materialize-css',
'es6-shim',
'style-loader',
'jquery',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/platform-server',
]
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevelopment ? [] : [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
minimize: true,
mangle: false // Due to https://github.com/angular/angular/issues/6678
})
])
};
home.hmlt home.hmlt
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
Have you tried to user the materilize-css Webpack loader: https://github.com/Zevran/materialize-loader Snippets from their site (after you npm i -D materialize-loader url-loader file-loader): 您是否尝试过使用materilize-css Webpack加载器: https : //github.com/Zevran/materialize-loader来自其站点的片段(在您使用npm i -D materialize-loader url-loader文件加载器之后):
loaders: [ { test: /\\.woff(2)?(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, loader:"url?limit=10000&mimetype=application/font-woff" }, { test: /\\.(ttf|eot|svg)(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, loader: "file" } ]
loaders: [ { test: /\\.woff(2)?(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, loader:"url?limit=10000&mimetype=application/font-woff" }, { test: /\\.(ttf|eot|svg)(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, loader: "file" } ]
require("materialize-loader");
require("materialize-loader");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.