mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Update docs with webpack 4 example (#2396)
* Update docs with webpack 4 Hello! Extract-text-plugin is deprecated in webpack 4 and onward in favor of Mini-css-extract: https://github.com/webpack-contrib/extract-text-webpack-plugin So I edited your doc to include a webpack 4 example and indicated that the previous example is for webpack 3 and less * Typo fixed Typo fixed
This commit is contained in:
parent
fc8c21aa42
commit
12138cdd2a
@ -86,6 +86,42 @@ module.exports = {
|
||||
};
|
||||
{% endcapture %}
|
||||
|
||||
{% capture configv4 %}
|
||||
const path = require('path');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'js/bundle.js'
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: 'css-loader'
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
// options...
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: css/[name].bundle.css'
|
||||
}),
|
||||
]
|
||||
};
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_3 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -104,6 +140,24 @@ module.exports = {
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_3.5 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Create a <code>webpack.config.js</code> file:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight js %}{{ configv4 }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
This setup takes the <code>src</code> folder as input, and outputs in the <code>dist</code> folder.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture require_css %}
|
||||
require('./mystyles.scss');
|
||||
{% endcapture %}
|
||||
@ -174,10 +228,17 @@ Wrote CSS to /path/to/mybulma/css/mystyles.css
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="3. Create a webpack config"
|
||||
title="3. Create a webpack config (Webpack <= 3)"
|
||||
content=step_3
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="3.5. Create a webpack config (Webpack 4)"
|
||||
content=step_3.5
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
|
Loading…
Reference in New Issue
Block a user