Стоит ли игра свеч?
const extractSass = new ExtractTextPlugin({
filename: './css/style.css',
disable: process.env.NODE_ENV === 'development'
});plugins: [
cleanDist,
new ExtractTextPlugin('style.css')
]npm rebuild node-sass<link rel="stylesheet" href="dist/styles.scss">
// пробовал и cssimport './css/style.scss';"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"node-sass": "^4.9.0",
"path": "^0.12.7",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.9.1",
"webpack-cli": "^2.1.4",
"webpack-dev-server": "^3.1.4"
}const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const extractSass = new ExtractTextPlugin({
filename: './css/styles.css',
disable: process.env.NODE_ENV === 'development'
});
const cleanDist = new CleanWebpackPlugin(['dist']);
let conf = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'main.js',
publicPath: 'dist/'
},
devServer: {
overlay: true
},
module: {
rules: [
{
test: /\.scss$/,
use: extractSass.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
},
plugins: [
cleanDist,
extractSass
]
};
// Карта кода
module.exports = (env, options) => {
let production = options.mode === 'production';
conf.devtool = production
? false
: 'eval-sourcemap';
return conf;
}Попоробуй посмотри что будет, если
const obj = {
a: 1,
b: this,
с: this.a,
}"devDependencies": {
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}export default {
name: 'app',
data () {
return {
friends: [
{
first: 'Bobby',
last: 'Down',
age: 25
},
{
first: 'John',
last: 'Dowson',
age: 38
}
]
}
}
}<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app"></div>Vue.component('friend', {
props: ['friend'],
filters: {
fullName(name) {
return `${name.first} ${name.last}`;
}
},
methods: {
decrementAge(friend) {
return friend.age -= 1;
},
incrementAge(friend) {
return friend.age += 1;
}
},
template: `
<div>
<h3>{{ friend.age }}</h3>
<input v-model="friend.first" />
<input v-model="friend.last" />
<button v-on:click="decrementAge(friend)"> - </button>
<button v-on:click="incrementAge(friend)"> + </button>
</div>
`
});
const app = new Vue({
el: '#app',
data: {
friends: [
{
first: 'Bobby',
last: 'Down',
age: 25
},
{
first: 'John',
last: 'Dowson',
age: 38
}
]
},
template: `
<div class="center">
<friend v-for="friend in friends" v-bind:friend="friend"/>
</div>
`
})
И не надо никаких разных туториалов и уроков, официальной документации вполне достаточно.
const app = new Vue ({
el: '#app',
template: ``
и т.д.
Именно ) Долго с этим борюсь
Думал об этом, но не понял, как это реализовать. По идее, если бы у ссылки был padding, достающий до выпадающего меню, то так можно было сделать. Но в примере у ссылки нет padding или line-height
Выпадающее приходится позициниоровать с абсолютом и при наведении, оно съезжает сверху вниз, так что образуется отступ между ними