質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.23%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,020

hasshy

score 78

stylusで生成したソースに対して、autoprefixerを適用する方法を教えてください。   

情報を集めていると、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

'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)

import Vue from 'vue'
import App from './App'

import './stylus/app.styl'

new Vue({
  el: '#app',
  components: { App },
  template: '<app/>'
})
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

下記の様に変更して解決しました。

'use strict'

const path = require('path')
const webpack = require('webpack')

const vueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {

  mode: 'development',

  entry: {
    build: './src/index.ts'
  },

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },

  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    watchContentBase: true
  },

  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.pug$/,
        oneOf: [{
            resourceQuery: /^\?vue/,
            use: [
              'pug-plain-loader'
            ]
          },
          {
            use: [
              'raw-loader',
              'pug-plain-loader'
            ]
          }
        ]
      },
      {
        test: /\.styl(us)?$/,
        exclude: /node_modules/,
        use: [{
            loader: 'vue-style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')({
                  grid: true,
                  browsers: [
                    "> 1%",
                    "last 2 versions",
                    "not ie <= 8"
                  ]
                })
              ]
            },
          },
          {
            loader: 'stylus-loader'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    // new cleanWebpackPlugin(['dist']),
    new htmlWebpackPlugin({
      title: 'INDEX',
      template: './src/index.pug'
    }),
    new vueLoaderPlugin()
  ]
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる