以下のようなディレクトリ構成で、
project
├ dist
│ └ css
├ src
│ └ sass
│ └ style.scss
└ package.json
package.json
を以下のように、
JSON
1{
2 "name": "test",
3 "version": "1.0.0",
4 "description": "",
5 "scripts": {
6 "all": "npm run sass && npm run autoprefixer",
7 "sass": "node-sass src/sass/style.scss dist/css/style.css --output-style expanded",
8 "autoprefixer": "postcss dist/css/style.css --use autoprefixer -d build",
9 "watch": "onchange src/sass/style.scss -- npm run all"
10 },
11 "dependencies": {},
12 "devDependencies": {
13 "autoprefixer": "^9.5.0",
14 "node-sass": "^4.11.0",
15 "onchange": "^5.2.0",
16 "postcss": "^7.0.14",
17 "postcss-cli": "^6.1.2"
18 },
19 "browserslist": [
20 "last 2 versions",
21 "not ie < 11",
22 "Android >= 4",
23 "iOS >= 10"
24 ]
25}
style.scss
を以下のようにしました。
scss
1.box {
2 display: flex;
3 flex-direction: column;
4 width: 100vh;
5 height: 100vh;
6
7 .content {
8 flex: 1;
9 }
10}
この状態で、npm install
とnpm run watch
を実行した後、style.scss
の内容を以下のように変更し、保存をすると、project ディレクトリ下に build ディレクトリが作成され、その中にstyle.css
ファイルが出来ます。
scss
1.box {
2 display: flex;
3 flex-direction: column;
4 width: 100vh;
5 height: 100vh;
6
7 .content {
8 flex: 1;
9 max-width: 250px;
10 }
11}
style.css
ファイルの内容を確認すると、以下のようなコードになっており、無事ベンダープレフィックスの付与された CSS が生成されていることが確認出来ます。
CSS
1.box {
2 display: -webkit-box;
3 display: -ms-flexbox;
4 display: flex;
5 -webkit-box-orient: vertical;
6 -webkit-box-direction: normal;
7 -ms-flex-direction: column;
8 flex-direction: column;
9 width: 100vh;
10 height: 100vh;
11}
12
13.box .content {
14 -webkit-box-flex: 1;
15 -ms-flex: 1;
16 flex: 1;
17 max-width: 250px;
18}
追記
JSON
1{
2 "name": "test",
3 "version": "1.0.0",
4 "description": "",
5 "scripts": {
6 "all": "npm run sass && npm run autoprefixer",
7 "sass": "node-sass src/sass/style.scss dist/css/style.css --output-style expanded",
8 "autoprefixer": "postcss dist/css/style.css --use autoprefixer --replace",
9 "watch": "onchange src/sass/style.scss -- npm run all"
10 },
11 "dependencies": {},
12 "devDependencies": {
13 "autoprefixer": "^9.5.0",
14 "node-sass": "^4.11.0",
15 "onchange": "^5.2.0",
16 "postcss": "^7.0.14",
17 "postcss-cli": "^6.1.2"
18 },
19 "browserslist": [
20 "last 2 versions",
21 "not ie < 11",
22 "Android >= 4",
23 "iOS >= 10"
24 ]
25}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/06 05:19
2019/04/06 10:50
2019/04/06 11:11 編集
2019/04/06 11:38
2019/04/06 11:42
2019/04/06 12:13
2019/04/06 16:49
2019/04/06 18:57