diff --git a/nuxt.config.ts b/nuxt.config.ts
index e363792..cc73e9c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -61,6 +61,8 @@ module.exports = {
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa',
+ // https://github.com/nuxt-community/style-resources-module/
+ '@nuxtjs/style-resources',
// https://github.com/potato4d/nuxt-client-init-module
// https://qiita.com/potato4d/items/cc5d8ea24949e86f8a5b
'nuxt-client-init-module',
@@ -132,5 +134,8 @@ module.exports = {
component: resolve(__dirname, 'src/include/include.vue')
})
}
+ },
+ styleResources: {
+ scss: ['@/assets/styles/components/**/*.scss']
}
}
diff --git a/package.json b/package.json
index dba97eb..d18c514 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
},
"devDependencies": {
"@nuxtjs/eslint-config": "^0.0.1",
+ "@nuxtjs/style-resources": "^0.1.2",
"@storybook/vue": "^4.1.13",
"@types/babel-core": "6.25.6",
"@types/eslint": "^4.16.6",
diff --git a/src/assets/styles/components/sample.scss b/src/assets/styles/components/sample.scss
new file mode 100644
index 0000000..fe57fda
--- /dev/null
+++ b/src/assets/styles/components/sample.scss
@@ -0,0 +1,3 @@
+.color {
+ color: aqua;
+}
diff --git a/src/pages/example/extend-css-class.vue b/src/pages/example/extend-css-class.vue
new file mode 100644
index 0000000..043a8ab
--- /dev/null
+++ b/src/pages/example/extend-css-class.vue
@@ -0,0 +1,34 @@
+
+ div
+ h1.title
+ | include
+ span.color {{ message }}
+
+
+
+
+
diff --git a/src/pages/example/index.vue b/src/pages/example/index.vue
index 4a28077..521e8c4 100644
--- a/src/pages/example/index.vue
+++ b/src/pages/example/index.vue
@@ -44,6 +44,9 @@
p
nuxt-link(to='/example/type-safe-vuex')
| type-safe-vuex
+ p
+ nuxt-link(to='/example/extend-css-class')
+ | extend-css-class