質問編集履歴

わかったことがあったので質問文を修正しました

2018/11/06 08:35

投稿

sugishio

スコア47

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,9 +2,15 @@
 こちらを参考に`.vue`ファイル内のcssを外部ファイルに抽出したのですが、
-まだ一部のファイルがhtmlに埋め込まれた状態で書き出されていまいます。
+vueコンポーネント内に記述したスタイルは`[name].css`内に書き出されておらず、
+そのページでマウントされるコンポーネントのcssがjsによって追加されているようです。
-ありうる原因として、何がありますでしょうか。。
+- これはvue-loaderの正しい挙動なのでしょうか？
+- `[name].css`内に書き出すにはどうしたら良いのでしょうか？
@@ -99,639 +105,3 @@
 }
 ```
-## headタグ内に埋め込まれたままのcss(scss)
-```scss
-  .loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 300px;
-    img {
-      width: 40px;
-      height: 40px;
-    }
-  }
-  .fade-enter-active, .fade-leave-active {
-    transition: all 1s ease;
-  }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
-```
-```scss
-@import 'mixins';
-.weather {
-  @extend %link-overlay;
-  display: block;
-  height: 50vw;
-  max-height: 460px;
-  background-image: url('/images/common/weather/bg/cloudy_sp.png');
-  background-position: center center;
-  background-size: cover;
-  color: inherit;
-  &.sunny {
-    background-image: url('/images/common/weather/bg/sunny_sp.png');
-  }
-  &.rainy1 {
-    background-image: url('/images/common/weather/bg/rainy1_sp.png');
-  }
-  &.rainy2 {
-    background-image: url('/images/common/weather/bg/rainy2_sp.png');
-  }
-  &.snowy1 {
-    background-image: url('/images/common/weather/bg/snowy1_sp.png');
-  }
-  &.snowy2 {
-    background-image: url('/images/common/weather/bg/snowy2_sp.png');
-  }
-  &__container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    padding: 1.5rem;
-    flex-wrap: wrap;
-  }
-  &__area {
-    font-size: 1.2rem;
-  }
-  &__date {
-    font-size: 1rem;
-  }
-  &__linkText {
-    display: block;
-    text-align: right;
-    a {
-      color: inherit;
-      font-size: 1rem;
-      line-height: 1;
-    }
-  }
-  &__list {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-.weather-detail {
-  flex: 1;
-  &:not(:first-child) {
-    margin-left: 1rem;
-  }
-  &__title {
-    margin-bottom: 1rem;
-    font-size: 1.6rem;
-    font-weight: normal;
-    color: inherit;
-  }
-  &__body {
-    display: flex;
-    align-items: center;
-  }
-  &__icon {
-    max-width: 100px;
-    margin-left: -1.5rem;
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-  .temp {
-    &::after {
-      margin-left: .8rem;
-      content: '℃';
-    }
-  }
-  .temp-slash {
-    margin: 0 .4rem;
-  }
-  .precip {
-    &::after {
-      margin-left: .4rem;
-      content: '％';
-    }
-  }
-}
-.pc {
-  .weather {
-    height: 255px;
-    background-image: url('/images/common/weather/bg/cloudy_pc.png');
-    &.sunny {
-      background-image: url('/images/common/weather/bg/sunny_pc.png');
-    }
-    &.rainy1 {
-      background-image: url('/images/common/weather/bg/rainy1_pc.png');
-    }
-    &.rainy2 {
-      background-image: url('/images/common/weather/bg/rainy2_pc.png');
-    }
-    &.snowy1 {
-      background-image: url('/images/common/weather/bg/snowy1_pc.png');
-    }
-    &.snowy2 {
-      background-image: url('/images/common/weather/bg/snowy2_pc.png');
-    }
-    &__container {
-      padding: 2rem;
-    }
-    &__linkText a {
-      font-size: 1.5rem;
-    }
-    &__area {
-      font-size: 1.8rem;
-    }
-    &__date {
-      font-size: 1.5rem;
-    }
-  }
-  .weather-detail {
-    width: 200px;
-    &__icon {
-      margin-left: -.5rem;
-    }
-  }
-}
-```
-```scss
-.list-item {
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-height: 43px;
-  padding: .5rem 1.5rem;
-  color: #3c3c3c;
-  background-color: white;
-  border-bottom: 1px solid #cfcfcf;
-  @include PC {
-    min-height: 50px;
-  }
-  @extend %link-overlay;
-  .list-item-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-    align-content: center;
-    width: 100%;
-    min-height: calc(43px - 1rem);
-    // IEのみテキストの位置がずれるため調整
-    @media screen\0 {
-      padding-top: .45rem;
-    }
-    .title {
-      width: 100%;
-      font-size: 13px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      @include PC {
-        font-size: 15px;
-      }
-    }
-    .badge-wrap {
-      position: absolute;
-      right: 2.0em;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-}
-.list-item {
-  .icon {
-    width: 24px;
-    font-size: 20px;
-    text-align: center;
-  }
-}
-// アイコン
-.list-item .icon {
-  // デフォは非表示
-  display: none;
-  margin-right: .5em;
-}
-.list-item.garbage .icon {
-  display: block;
-  &::before {
-    content: $fa-var-trash-o;
-  }
-}
-.list-item.tenant_guide .icon {
-  display: block;
-  &::before {
-    content: $fa-var-compass;
-  }
-}
-.list-item.facility_manual .icon {
-  display: block;
-  &::before {
-    content: $fa-var-wrench;
-  }
-}
-.list-item.contract .icon {
-  display: block;
-  &::before {
-  content: $fa-var-file-o;
-}
-}
-.list-item.leave_contact .icon {
-  display: block;
-  &::before {
-  content: $fa-var-ban;
-}
-}
-.list-item.emergent_contact .icon {
-  display: block;
-  &::before {
-    content: $fa-var-phone;
-  }
-}
-.list-item.service_contact .icon {
-  display: block;
-  &::before {
-    content: $fa-var-comment-o;
-  }
-}
-.list-item.move_contact .icon {
-  display: block;
-  &::before {
-    content: $fa-var-home;
-  }
-}
-.list-item.report .icon {
-  display: block;
-  &::before {
-    content: $fa-var-file-text-o;
-  }
-}
-.list-item.help_category .icon {
-  display: block;
-  &::before {
-    content: $fa-var-book;
-  }
-}
-.list-item.support .icon {
-  display: block;
-  &::before {
-    content: $fa-var-question-circle;
-  }
-}
-```

webpackの設定を追記しました

2018/11/06 08:35

投稿

sugishio

スコア47

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,6 +18,90 @@
+## webpack設定（一部抜粋）
+```js
+'use strict';
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+module.exports = {
+  module: {
+    loaders: [
+    {
+      test: /.vue$/,
+      loader: 'vue-loader',
+      options: {
+        extractCSS: true,
+        loaders: {
+          js: 'babel-loader',
+          file: 'url-loader',
+          scss: 'vue-style-loader!css-loader?sourceMap!postcss-loader?sourceMap!resolve-url-loader?sourceMap!sass-loader?sourceMap',
+          sass: 'vue-style-loader!css-loader?sourceMap!postcss-loader?sourceMap!resolve-url-loader?sourceMap!sass-loader?sourceMap&indentedSyntax'
+        }
+      }
+    },
+    {
+      test: /.(scss|sass|css)$/i,
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [
+        { loader: 'css-loader' },
+        { loader: 'postcss-loader', options: { sourceMap: true } },
+        'resolve-url-loader',
+        { loader: 'sass-loader', options: { sourceMap: true } }
+        ]
+      })
+    },
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin('[name].css'),
+  ]
+}
+```
 ## headタグ内に埋め込まれたままのcss(scss)

タグが間違っていたので変更しました

2018/11/06 07:48

投稿

sugishio

スコア47

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes