常連

初めまして。mitonと申します。
知りたいことはタイトル通りです。
以下、学習希望者のスペックと知りたいポイントをまとめます。

### 学習希望者スペック

・ WEB制作の知識はHTMLとCSSのみ。SassやLessは学んだことがなく、導入方法を検索で調べた程度の知識。
・ JavaScriptの知識についてはライブラリを元に少し調整する程度。１から構築していけるだけの知識はない。
・ Stylusを学習したいと思ったのは ① Sass構文とLess構文のどちらにも対応している汎用性 ② 生のcssの形での入力も出来そう という２点の柔軟な印象から。
※ ②については生のcssしかいじれない方にデータを渡す可能性を考慮し、必要と感じた。

### 知りたいポイント

・ 生のCSSしか知らない状態のまま、Stulusを学ぶのはそもそも無謀だろうか？
┗ SassやLessを学んでからの方が理解しやすそうな印象を受けたが、出来ることなら学習コストは抑えたい。
・ Stylus学ぶ～業務に取り入れる中で発生した問題やリスクはあるか？
・ Stylusを学ぶ上で参考・ヒントになるサイトや書籍等は何か？

### 

Sassと比べ検索で拾える情報が少ないことから、初学者向けのものではないのでは？と不安を感じ、質問いたしました。
Stylusを業務に取り入れた方の感想等を拝見し、今後も移りゆくWEB制作の現場でも柔軟に対応していけるのでは、と魅力を感じたのですが…

多くの方からの様々なご意見をお待ちしております。
（誹謗・中傷除く）

### 追記事項
ここまでコメント下さった皆様、ありがとうございます。少しづつ返答させて頂きます。
以下、編集・追記依頼への回答となります。

■ 私自身の環境と懸念しているリスクについて

私自身は現在、少人数体制の制作会社でWEBデザイナーとして働いております。
会社での業務において、CSSプリプロセッサの導入はこれまでしてきませんでした。

リスクの可能性として考えていたのは、このような記号の省略等をする記法で制作したデータを
生のCSSしかいじったことがない環境の人たちが修正・調整しようとする際、混乱を招くことはないのだろうか、という点でした。

一個人として学ぶ上では何ら問題がない、むしろプラスに繋がっていく印象を頂いたコメントからも感じています。
個人的には、Sassの方が参考となる情報の量からも学びやすそうに感じたのですが、
上記の懸念を考慮した時、Stylusの方が記法の癖が少なく、現在の周囲の環境にも柔軟に合わせやすいのかな、と感じました。

また、SassまたはLessを学習した上でStylusを取り入れる、というのが一般的な学習ステップと感じたのですが、
SassやLessを学ばず最初からダイレクトにStylusを学ぶことで、学習コストを抑えることに繋がらないだろうか？と考え、
「出来ることなら学習コストは抑えたい」の一文を記述しました。

なお、状況説明について事細かにする事は少し憚られたため、
以上がご説明できる範囲、とさせて頂きます。

生のCSSしかいじったことがない人がStylusを学ぶ学習コスト・リスクについて知りたい。

webpackで、vue+pug+stylusをビルドしたいのですが、stylusをcssファイルにビルドして読み込ませる方法が分かりません。 　

vueファイル内のstyleタグ内でlangにstylusを指定して変換する事はできました。　
しかし、別ファイルにしているstylusファイルをビルドする方法が分かりません。  

別ファイルにしたい目的は、vueで動的に変えない静的な要素（例えばヘッダーやフッター）は、stylusファイルからビルドしたcssを使用したいためです。  

configの設定で足りない部分があると考えているのですが、どの様にすればstyulsファイルからcssをビルドできるのでしょうか？
また、仮想環境で確認したいのですが、どの様に設定を書けば良いのでしょうか？

## 仕様
### ディレクトリ構成
下記の様な構成になっています。 
ビルドしたいファイルは、```src/stylus```配下にあるファイルです。

```
.
├── dest(ビルドしたファイルを置くディレクトリです)
│   ├── bundle.js
│   └── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src(ビルドする元のファイルです)
│   ├── App.vue
│   ├── components
│   │   └── Counter.vue
│   ├── index.js
│   ├── pug
│   │   ├── index.pug
│   │   └── parts
│   └── stylus
│       ├── app.stylus
│       └── common.styl
├── static
└── webpack.config.js
```

### インストールしているnpmのライブラリ
package.jsonのライブラリの中身をそのまま転記して恐縮ですが、次のライブラリをインストールしています。  
試行錯誤でインストールしたものもあり、不要なものもあるかもしれません。

```
"devDependencies": {
  "@babel/core": "^7.2.2",
  "@babel/preset-env": "^7.3.1",
  "autoprefixer": "^9.4.7",
  "babel-loader": "^8.0.5",
  "clean-webpack-plugin": "^1.0.1",
  "css-loader": "^2.1.0",
  "html-webpack-plugin": "^3.2.0",
  "postcss-loader": "^3.0.0",
  "pug": "^2.0.3",
  "pug-plain-loader": "^1.0.0",
  "raw-loader": "^1.0.0",
  "style-loader": "^0.23.1",
  "stylus": "^0.54.5",
  "stylus-loader": "^3.0.2",
  "vue-loader": "^15.6.2",
  "vue-template-compiler": "^2.5.22",
  "webpack": "^4.29.0",
  "webpack-cli": "^3.2.1",
  "webpack-dev-server": "^3.1.14"
},
"dependencies": {
  "vue": "^2.5.22"
},
```

## ファイルについて
### index.html
head内で読み込んでるcommon.cssとapp.cssは、それぞれ、common.stylusと、app.stylusをビルドしたものを読み込ませる想定で入れています。  

```html
<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>タイトルタグ</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
  <header>
    <h1 class="header__title">ページタイトル</h1>
  </header>
  <div id="app"></div>
  <div id="main"></div>
  <div class="container">
    <h2 class="container__subtitle">注意</h2>
    <p>ホゲホゲ</p>
  </div>
  <footer>
    <div class="copylight">&copy; コピーライト</div>
  </footer>
  <script type="text/javascript" src="bundle.js"></script>
</body>

</html>
```

#### （参考）元のpugファイル
ご参考までにビルド前の状態です。

``` pug
doctype html
html(lang='jp' dir='ltr')
  head
    meta(charset='utf-8') 
    title タイトルタグ
    link(rel='stylesheet', href="css/common.css")
    link(rel='stylesheet', href="css/app.css")
  
  body
    header
      h1.header__title ページタイトル

    #app
    #main
    
    .container
      h2.container__subtitle 注意
      p ホゲホゲ
    
    footer
      .copylight &copy; コピーライト
 
```

### webpack.config.js

``` js
'use strict'

const path = require('path')

const vueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')

const cleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {

  entry: {
    app: './src/index.js'
  },

  output: {
    path: path.resolve(__dirname, './dest'),
    filename: 'bundle.js'
  },

  devServer: {
    contentBase: path.resolve(__dirname, 'public')
  },

  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        loader: 'babel-loader'
      },
      {
        test: /.pug$/,
        oneOf: [
          {
            resourceQuery: /^?vue/,
            use: [
              'pug-plain-loader'
            ]
          },
          {
            use: [
              'raw-loader',
              'pug-plain-loader'
            ]
          }
        ]
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /.styl(us)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'vue-style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'stylus-loader'
          }
        ]
      }
    ]
  },

  // リザーブ
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  },

  // プラグイン設定
  plugins: [
    new cleanWebpackPlugin(['dest']),
    new vueLoaderPlugin(),
    new htmlWebpackPlugin({
      template: './src/pug/index.pug',
      inject: true
    })
  ]
}
```
### App.vue 
vueは下記の様に記載しました。  
stylusについてですので、Counterについては省略します。

``` vue
<template lang="pug">
.container
  h2.container__subtitle メインアプリ
  p.container__message Heelo, World!
  counter
</template>

<script>
import Counter from './components/Counter'

export default {
  components: {Counter},
}
</script>

<style lang="stylus">
.container__message
  color red
</style>

```

### index.js(エントリーポイントに使用しているjs)

```js
import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '<app/>'
})

```

### stylusのファイルについて
stylusで現在コードがあるのは、common.stylのみですので、こちらを記載します。

```stylus
#main
  color: red;
  width: 100%;
  border: 1px
```


## 実現出来ている事
前述した内容と重複しますが次の事は出来ています。  

- pug内に記載したstylusはビルド出来ている。 
- 仮想環境で確認するために```webpack-dev-server --hot```を実行すると、pugから作成されたhtmlと、vueからビルドしたjsファイルを読み込まれていることが確認できた。   
    - 仮想環境環境は、```webpack-dev-server```を使用しています。  
- 実ファイルを生成するために、```webpack -p```を実行すると、pugから作成されたhtmlと、vueからビルドしたjsファイルが生成されることは確認できた。

【webpack】別ファイルのstylusファイルをビルドするconfigの書き方について

# ◆前提

Rails6でstylusというCSSプリプロセッサーを使用するために、
stylusからCSSへのコンパイルは、Railsとは関係なく、gulpを用いています。


# ◆困っていること

stylusからコンパイルされたCSSが、どういうわけか、
そのままではRailsに反映されません

しかし、そのCSSを何も変更せずに、ただ再保存(CSSを開き、Command+S)するだけで、
Railsに反映されるようになります。

その際、Railsが何かCSSの保存を監視しているのかと思ったのですが、
CSS保存時にRailsサーバーが起動していようが、停止していようが同様でした。

(再保存前に、Railsが停止していても、再保存すれば反映されます。
また、Railsを再起動しても、再保存していなければ、反映されません)


# ◆試したこと・分かっていること

手動でRailsキャッシュを削除すれば、反映されます。
ブラウザキャッシュではなく、Railのキャッシュによるものでした。
(複数ブラウ確認しました)
```
rm -rf tmp/cache/*
```

下記の2つの方式で、デバッグモードはオンになっており、development環境
であれば、キャッシュされない？ようになっていると思っています
```
config/environments/development.rbに記載

config.assets.debug = true
```

```ここに言語を入力
stylesheet_link_tag 'application', debug: true
```

また、development環境であることを確認しました
```
rails c
irb(main):001:0> Rails.env
=> "development"
```


アドバイスお願いいたします。

Rails6 CSSが反映されない (再保存するだけで反映される)

stylusで生成したソースに対して、autoprefixerを適用する方法を教えてください。   

情報を集めていると、postcssで[autoprefixer](https://github.com/postcss/autoprefixer)を使用するという情報を得られました。  

そのため、後述する```webpack.config.js```のように、stylusに対して、次のローダーを使用するように調整しました。  

1. vue-style-loader
2. css-loader
3. postcss-loader(autoprefixerを指定しています。)
4. stylus-loader

ビルド自体はできるものの、autoprefixerで追加されるはずのスタイルが追加できませんでした。 
webpackとstylusを組み合わせた状態で、autoprefixを使うにはどのように設定すればよいでしょうか？

## 仕様
先日設問した時のソースコードをベースに作っていますので、重複する箇所もあります。

### ディレクトリ構成
下記の様な構成になっています。 
ビルドしたいファイルは、```src/stylus```配下にあるファイルです。

```
.
├── dest(ビルドしたファイルを置くディレクトリです)
│   ├── bundle.js
│   └── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src(ビルドする元のファイルです)
│   ├── App.vue
│   ├── components
│   │   └── Counter.vue
│   ├── index.js
│   ├── pug
│   │   ├── index.pug
│   │   └── parts
│   └── stylus
│       ├── app.stylus
│       └── common.styl
├── static
└── webpack.config.js
```

### インストールしているnpmのライブラリ
package.jsonのライブラリの中身をそのまま転記して恐縮ですが、次のライブラリをインストールしています。  
試行錯誤でインストールしたものもあり、不要なものもあるかもしれません。

```
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "raw-loader": "^1.0.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^15.6.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "vue": "^2.5.22"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
```

## ファイルについて

### webpack.config.js
``` js
'use strict'

const path = require('path')

const vueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {

  // エントリーポイント設定
  entry: {
    // エントリーポイントのファイル
    app: './src/index.js'
  },

  // 出力設定
  output: {
    // 出力ディレクトリ
    path: path.resolve(__dirname, './dest'),
    // 出力ファイル名
    filename: 'bundle.js'
  },

  // テストサーバーの設定
  devServer: {
    // 起動時のrootサーバー
    contentBase: path.resolve(__dirname, 'public')
  },

  // モジュール設定
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: [require('autoprefixer')]
        }
      },
      {
        test: /.js$/,
        loader: 'babel-loader'
      },
      {
        test: /.pug$/,
        oneOf: [
          {
            resourceQuery: /^?vue/,
            use: [
              'pug-plain-loader'
            ]
          },
          {
            use: [
              'raw-loader',
              'pug-plain-loader'
            ]
          }
        ]
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')({
                  grid: true
                })
              ]
            }
          },
        ]
      },
      {
        test: /.styl(us)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'vue-style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')({
                  grid: true
                })
              ]
            }
          },
          {
            loader: 'stylus-loader'
          }
        ]
      }
    ]
  },

  // リザーブ
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  },

  // プラグイン設定
  plugins: [
    new cleanWebpackPlugin(['dest']),
    new vueLoaderPlugin(),
    new htmlWebpackPlugin({
      template: './src/pug/index.pug',
      inject: true
    })
  ]
}
```

### stylusのファイル
ファイル一覧の```common.styl```の中身です。
ブラウザによって記述が変わる```display flex```を追加しましたので、この部分が各ブラウザ毎の記述が追加される想定です。 

```
.lists
  display flex
  justify-content space-between
  width: 100%
  .lists__list
    display block
    width 100px
    height 100px
    background-color green
```

### index.js(エントリーポイントに使用しているjs)
```js
import Vue from 'vue'
import App from './App'

import './stylus/app.styl'

new Vue({
  el: '#app',
  components: { App },
  template: '<app/>'
})
```

【webpack】stylusで作成したcssにautoprefixを適応したい

## 困っていること
nuxtjsで開発を行っているのですがcssのbackground-imageが表示されません。

## コード
```Stylus
.fifth-view
    background-image: url("~assets/images/home/fifth_view.jpg")
```

## Chromeコンソール
[![Image from Gyazo](https://i.gyazo.com/e34a328f9d9786ec1b17f37580a45391.png)](https://gyazo.com/e34a328f9d9786ec1b17f37580a45391)

https://gyazo.com/e34a328f9d9786ec1b17f37580a45391

## わからないこと
スクリーンショットの通り画像のパスはあっているかと思うのですが、画面は真っ白のままです。
Nuxtjsでの開発を始めたばかりということもあり、見落としがあるのかもしれません。
もし原因等わかる方いらっっしゃいましたらお力添えいただけると幸いです。
（他に欲しい情報などありましたらコメントいただければ対応いたします）

[Nuxtjs] background-imageが表示されない

## やりたいこと
テキストリンクを親要素全体に適用させた上で、テキストを上下左右中央に配置したい。

## 分からないこと
全体をリンク化するのはできたが、テキストが上に寄ってしまい
上下中央揃えができない。

![現状](a628699a0b744cb53e962d190b9a4cd9.png)

```
.prev
  nuxt-link(:to="prev")
```

```
.prev
  position relative
  a
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    text-align center
```

よろしくお願いいたします。

親要素全体にリンクを適用させた上で、上下左右中央揃え

SCSSとStylusのメリットデメリットがしりたいです。
調べてみても一長一短で実際に触れてみた方の意見が聞きたいです。
よろしくお願いいたします。

SCSSとStylusのメリットデメリットがしりたい

### 起きていること
CSSのスクロールスナップを使おうとしているのですが機能しません。

### 環境
OS Mojave
Chrome 79.0.3945.130
localhost

### 内容
scroll-typeを`mandatory`に、snap-alignを`start`にしているので、それぞれのsectionの始まり部分でスナップしてほしいのですが、スナップが機能せず通常のスクロールになってしまいます。

`scroll-snap not working` で検索して出た結果のページは全て見ましたが、記述に間違っている点はなさそうで、もしお気付きのことがあればご意見いただきたいです:bow:

### コード
```HTML
<template lang="pug">
.movie
  section.contents.contents-01
    |01
  section.contents.contents-02
    |02
  section.contents.contents-03
    |03
  section.contents.contents-04
    |04
  section.contents.contents-05
    |05
</template>
```
```CSS
.movie
  width 100%
  height 100%
  scroll-snap-type mandatory
  scroll-snap-points-y repeat(100vh)
  scroll-snap-type y mandatory
  -webkit-overflow-scrolling touch
  overflow-scrolling touch
  overflow scroll

  section.contents
    width 100%
    height 100vh
    padding 10%
    scroll-snap-align start
    position relative

  .contents-01
    background-color blue
  .contents-02
    background-color white
  .contents-03
    background-color blue
  .contents-04
    background-color white
  .contents-05
    background-color blue
```

### スクリーンショット
止まって欲しくないところで止まっている様子
[![Image from Gyazo](https://i.gyazo.com/1e157fbdfe1f8d28b200b1fed8bd71e5.png)](https://gyazo.com/1e157fbdfe1f8d28b200b1fed8bd71e5)