https://teratail.com/questions/107697
こちらのサイトに従って Vue+TypeScript+WebPack の環境を構築しました。
さらにここにsassからcssを自動ビルドするシステムを追加したいです。
npm i -D webpack sass-loader node-sass style-loader css-loader
このコマンドからsassloaderだけ入れました…
いくつかサイトを調べたのですが、現状のコードに追加するような形で環境を作る方法をうまく見出せませんでした(T_T)
js
1//webpack.config.js 2 3var saveLicense = require('uglify-save-license'); 4 5 6module.exports = { 7 // メインとなるJavaScriptファイル(エントリーポイント) 8 entry: { 9 main: './src/main.ts' 10 }, 11 12 13 // ファイルの出力設定 14 output: { 15 // 出力ファイルのディレクトリ名 16 path: `${__dirname}/build`, 17 // 出力ファイル名 18 filename: '[name].min.js' 19 }, 20 module: { 21 rules: [{ 22 // 拡張子 .ts の場合 23 test: /.ts$/, 24 // TypeScript をコンパイルする 25 use: 'awesome-typescript-loader' 26 }, 27 // ソースマップファイルの処理 28 { 29 enforce: 'pre', 30 test: /.js$/, 31 loader: 'source-map-loader' 32 } 33 ] 34 }, 35 // import 文で .ts ファイルを解決するため 36 resolve: { 37 extensions: [ 38 '.ts' 39 ], 40 // Webpackで利用するときの設定 41 alias: { 42 vue: 'vue/dist/vue.js' 43 } 44 }, 45 // ソースマップを有効に 46 devtool: 'source-map' 47}; 48
json
1//package.json 2 3{ 4 "name": "today", 5 "version": "1.0.0", 6 "description": "", 7 "main": "index.js", 8 "scripts": { 9 "test": "echo \"Error: no test specified\" && exit 1", 10 "start": "webpack -w", 11 "build": "webpack -w", 12 "watch": "webpack -w" 13 }, 14 "author": "", 15 "license": "ISC", 16 "devDependencies": { 17 "awesome-typescript-loader": "^3.4.1", 18 "css-loader": "^0.28.8", 19 "extract-text-webpack-plugin": "^3.0.2", 20 "node-sass": "^4.7.2", 21 "sass-loader": "^6.0.6", 22 "source-map-loader": "^0.2.3", 23 "style-loader": "^0.19.1", 24 "typescript": "^2.6.2", 25 "webpack": "^3.10.0" 26 }, 27 "dependencies": { 28 "vue": "^2.5.13", 29 "vue-class-component": "^6.1.2" 30 } 31} 32
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/01/12 06:52