建立Phoenix 1.4+;网页包+;祖鲁基金会 如何在菲尼克斯1.4 + WebPACK上安装ZURB基金会CSS框架? 不幸的是,我在任何地方都找不到任何例子 混合PHX.Server在没有WebPACK运行的情况下开始运行良好,但我没有看到ZURB基金会CS/JS加载在我的App.js/App.SCSS…中。
Package.json建立Phoenix 1.4+;网页包+;祖鲁基金会 如何在菲尼克斯1.4 + WebPACK上安装ZURB基金会CSS框架? 不幸的是,我在任何地方都找不到任何例子 混合PHX.Server在没有WebPACK运行的情况下开始运行良好,但我没有看到ZURB基金会CS/JS加载在我的App.js/App.SCSS…中。,webpack,zurb-foundation,phoenix-framework,Webpack,Zurb Foundation,Phoenix Framework,Package.json { "repository": {}, "license": "MIT", "scripts": { "deploy": "webpack --mode production", "watch": "webpack --mode development --watch" }, "dependencies": { "formdata-polyfill": "^3.0.18", "mdn-polyfills": "^5.1
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"formdata-polyfill": "^3.0.18",
"mdn-polyfills": "^5.17.0",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
"url-search-params-polyfill": "^6.0.0",
"foundation-sites": "^6.5.3",
"what-input": "^5.2.3",
"jquery": "^3.3.1",
"sass-loader": "^7.1.0",
"node-sass": "^4.12.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.4.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "4.4.0",
"webpack-cli": "^3.3.4"
}
}
Webpack.config.js
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
//const foundation = require('foundation-sites/dist/js/foundation.min.js');
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'./js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
externals: {
jquery: 'jQuery',
foundation: 'Foundation'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
resolve: {
modules: ['node_modules', path.resolve(__dirname, 'js')],
extensions: ['.js'],
alias: {
foundation: 'foundation-sites/js/foundation.core'
}
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]
});
import LiveSocket from "phoenix_live_view"
let liveSocket = new LiveSocket("/live")
liveSocket.connect()
import css from "../css/app.scss"
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"
app.js
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
//const foundation = require('foundation-sites/dist/js/foundation.min.js');
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'./js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
externals: {
jquery: 'jQuery',
foundation: 'Foundation'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
resolve: {
modules: ['node_modules', path.resolve(__dirname, 'js')],
extensions: ['.js'],
alias: {
foundation: 'foundation-sites/js/foundation.core'
}
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]
});
import LiveSocket from "phoenix_live_view"
let liveSocket = new LiveSocket("/live")
liveSocket.connect()
import css from "../css/app.scss"
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"
这是对我有效的解决方案
节点sass:“^4.12.0”
sass加载器“^8.0.0”
“自动刷新器”:“^9.6.4”
“基础场地”:“^6.5.3”
“jquery”:“^3.4.1”
“输入内容”:“^5.2.6”
npm
或纱线
(我使用纱线)
“webpack”:“4.41.1”
版本,我看到人们对以前的版本有一些问题assets/css/app.css
重命名为assets/css/app.scss
,并在其中放入以下行:assets/app.js
如下:webpack.cpnfig.js
如下:
- 添加
const webpack=require('webpack')代码>位于文件顶部其他声明常量之后:
- 在
部分中,修改有关css和加载程序的行:modules/rules
- 在
pligins部分,添加以下行以使用
jQuery`:
。/templates/layout/app.html.eex
以使用Foundation
样式,如下所示:
Storex·Phoenix框架
- 站点标题
-
- 搜寻
希望这有帮助。同样的问题,通过下面的教程更容易用BooSrTAP 4来设置它,但是我仍然被Foundation 5.5.3所困扰。
...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
...
plugins: [
require('autoprefixer'),
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
new webpack.ProvidePlugin({ // inject modules as global vars
$: 'jquery',
jQuery: 'jquery', 'window.jQuery': 'jquery',
})
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Storex · Phoenix Framework</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
</head>
<body>
<header>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
<a href="#0">One</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#0">One</a></li>
<li><a href="#0">Two</a></li>
<li><a href="#0">Three</a></li>
</ul>
</li>
<li><a href="#0">Two</a></li>
<li><a href="#0">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
</header>
<div class="grid-container fluid">
<%= unless is_nil(get_flash(@conn, :info)) do %>
<p class="success label" role="alert"><%= get_flash(@conn, :info) %></p>
<% end %>
<%= unless is_nil(get_flash(@conn, :error)) do %>
<p class="alert label" role="alert"><%= get_flash(@conn, :error) %></p>
<% end %>
<%= render @view_module, @view_template, assigns %>
</div>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>