├── lib ├── scss.js ├── plugin.js └── module.js ├── renovate.json ├── example ├── assets │ └── scss │ │ ├── variables.scss │ │ └── scss.js ├── pages │ └── index.vue └── nuxt.config.js ├── commitlint.config.js ├── .gitignore ├── .eslintignore ├── husky.config.js ├── babel.config.js ├── .editorconfig ├── .eslintrc.js ├── jest.config.js ├── test └── module.test.js ├── CHANGELOG.md ├── .github └── workflows │ └── ci.yml ├── LICENSE ├── package.json └── README.md /lib/scss.js: -------------------------------------------------------------------------------- 1 | export default <%= JSON.stringify(options,null, 2) %> -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /example/assets/scss/variables.scss: -------------------------------------------------------------------------------- 1 | $variable: 'INJECTED'; 2 | $js: 'EXPORTED'; -------------------------------------------------------------------------------- /example/assets/scss/scss.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "variable": "'INJECTED'", 3 | "js": "'EXPORTED'" 4 | } -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | '@commitlint/config-conventional' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_Store 8 | coverage 9 | dist 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Common 2 | node_modules 3 | dist 4 | .nuxt 5 | coverage 6 | 7 | .eslintrc.js 8 | 9 | # Plugin 10 | lib/plugin.js 11 | lib/scss.js 12 | /example/assets/scss/scss.js -------------------------------------------------------------------------------- /husky.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | hooks: { 3 | 'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS', 4 | 'pre-commit': 'yarn lint', 5 | 'pre-push': 'yarn lint' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /lib/plugin.js: -------------------------------------------------------------------------------- 1 | var option = <%= JSON.stringify(options,null, 2) %> 2 | 3 | export default async function ({ router, store }, inject) { 4 | inject(option.namespace, option.theme ); 5 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', { 5 | targets: { 6 | esmodules: true 7 | } 8 | } 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /example/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | -------------------------------------------------------------------------------- /example/nuxt.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '..'), 5 | buildDir: resolve(__dirname, '.nuxt'), 6 | srcDir: __dirname, 7 | modules: [ 8 | { handler: require('../') } 9 | ], 10 | nuxtScssToJs: { 11 | generate: true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | extends: [ 8 | '@nuxtjs' 9 | ], 10 | rules: { 11 | 'semi': 'off', 12 | 'no-var': 'off', 13 | 'comma-spacing': 'off', 14 | 'require-await': 'off', 15 | 'dot-notation': 'off', 16 | 'camelcase': 'off', 17 | 'no-useless-escape': 'off' 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: 'node', 3 | collectCoverage: true, 4 | collectCoverageFrom: [ 5 | 'lib/**/*.js', 6 | '!lib/plugin.js', 7 | '!lib/scss.js' 8 | ], 9 | moduleNameMapper: { 10 | '^~/(.*)$': '/lib/$1', 11 | '^~~$': '', 12 | '^@@$': '', 13 | '^@/(.*)$': '/lib/$1' 14 | }, 15 | transform: { 16 | '^.+\\.js$': 'babel-jest' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /test/module.test.js: -------------------------------------------------------------------------------- 1 | const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils') 2 | 3 | describe('module', () => { 4 | let nuxt 5 | 6 | beforeAll(async () => { 7 | ({ nuxt } = (await setup(loadConfig(__dirname, '../../example')))) 8 | }, 60000) 9 | 10 | afterAll(async () => { 11 | await nuxt.close() 12 | }) 13 | 14 | test('render', async () => { 15 | const html = await get('/') 16 | expect(html).toContain('INJECTED') 17 | expect(html).toContain('EXPORTED') 18 | }) 19 | }) 20 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [1.0.4](https://github.com/sugoidesune/nuxt-scss-to-js/compare/v1.0.3...v1.0.4) (2020-06-01) 6 | 7 | ### [1.0.3](https://github.com/sugoidesune/nuxt-scss-to-js/compare/v1.0.2...v1.0.3) (2020-06-01) 8 | 9 | ### [1.0.2](https://github.com/sugoidesune/nuxt-scss-to-js/compare/v1.0.1...v1.0.2) (2020-06-01) 10 | 11 | ### 1.0.1 (2020-06-01) 12 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | ci: 13 | runs-on: ${{ matrix.os }} 14 | 15 | strategy: 16 | matrix: 17 | os: [ubuntu-latest, macos-latest, windows-latest] 18 | node: [10, 12] 19 | 20 | steps: 21 | - uses: actions/setup-node@v1 22 | with: 23 | node-version: ${{ matrix.node }} 24 | 25 | - name: checkout 26 | uses: actions/checkout@master 27 | 28 | - name: cache node_modules 29 | uses: actions/cache@v1 30 | with: 31 | path: node_modules 32 | key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }} 33 | 34 | - name: Install dependencies 35 | if: steps.cache.outputs.cache-hit != 'true' 36 | run: yarn 37 | 38 | - name: Lint 39 | run: yarn lint 40 | 41 | - name: Test 42 | run: yarn test 43 | 44 | - name: Coverage 45 | uses: codecov/codecov-action@v1 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) sugoidesune 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-scss-to-js", 3 | "version": "1.0.4", 4 | "description": "Load SCSS Variables into Nuxt instance for use in Templates/Scripts.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/sugoidesune/nuxt-scss-to-js" 8 | }, 9 | "license": "MIT", 10 | "contributors": [ 11 | { 12 | "name": "sugoidesune " 13 | } 14 | ], 15 | "files": [ 16 | "lib" 17 | ], 18 | "main": "lib/module.js", 19 | "scripts": { 20 | "dev": "nuxt example", 21 | "lint": "eslint --ext .js,.vue .", 22 | "fix": "eslint --fix --ext .js,.vue .", 23 | "release": "npm test && standard-version && git push --follow-tags && npm publish", 24 | "test": "npm run lint && jest" 25 | }, 26 | "dependencies": { 27 | "scss-to-json": "^2.0.0" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "latest", 31 | "@babel/preset-env": "latest", 32 | "@commitlint/cli": "latest", 33 | "@commitlint/config-conventional": "latest", 34 | "@nuxtjs/eslint-config": "latest", 35 | "@nuxtjs/module-test-utils": "latest", 36 | "babel-eslint": "latest", 37 | "babel-jest": "latest", 38 | "eslint": "latest", 39 | "husky": "latest", 40 | "jest": "latest", 41 | "nuxt-edge": "latest", 42 | "standard-version": "latest" 43 | }, 44 | "publishConfig": { 45 | "access": "public" 46 | }, 47 | "keywords": [ 48 | "nuxt", 49 | "nuxtjs", 50 | "vue", 51 | "scss", 52 | "tailwind", 53 | "bootstrap", 54 | "vuetify", 55 | "material", 56 | "svg", 57 | "theme", 58 | "json" 59 | ] 60 | } 61 | -------------------------------------------------------------------------------- /lib/module.js: -------------------------------------------------------------------------------- 1 | import scssJson from 'scss-to-json' 2 | const { resolve } = require('path') 3 | // next version maybe use @leipert/sass-export for more customization of scss 4 | 5 | const defaults = { 6 | path: '~/assets/scss/variables.scss', 7 | namespace: 'scss', 8 | generate: false, 9 | inject: true 10 | } 11 | 12 | const remove$ = object => Object.entries(object).reduce((acc,entry) => { 13 | acc[entry[0].substr(1)] = entry[1] 14 | return acc 15 | },{}) 16 | 17 | module.exports = async function (moduleOptions) { 18 | const config = { 19 | ...this.options['nuxtScssToJs'], 20 | ...moduleOptions 21 | } 22 | const options = Object.assign(defaults, config) 23 | 24 | // add scss file to watch property to rebuild modules on change. 25 | // otherwise only loads scss on inital build. 26 | this.options.watch.push(options.path) 27 | 28 | var resolvedPath = this.nuxt.resolver.resolveAlias(options.path) 29 | var filePath = resolve(__dirname, resolvedPath); 30 | var variables = remove$(scssJson(filePath)) 31 | 32 | if (options.generate) { 33 | // TODO. When .scss changes .js gets updated automatically. but vue doesn't rerender changes. page refresh necessary 34 | const generate_path = resolvedPath.replace(/[^\\\/]+\.scss/gi, `${options.namespace}.js`) 35 | this.addTemplate({ 36 | src: resolve(__dirname, 'scss.js'), 37 | fileName: generate_path, 38 | options: { 39 | ...variables 40 | } 41 | }); 42 | } 43 | 44 | if (options.inject) { 45 | this.addPlugin({ 46 | src: resolve(__dirname, 'plugin.js'), 47 | fileName: 'nuxt-scss-to-js.js', 48 | options: { 49 | namespace: options.namespace, 50 | theme: variables, 51 | options 52 | } 53 | }) 54 | } 55 | } 56 | 57 | module.exports.meta = require('../package.json') 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nuxt-scss-to-js 2 | 3 | [![npm version][npm-version-src]][npm-version-href] 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 5 | [![Github Actions CI][github-actions-ci-src]][github-actions-ci-href] 6 | [![Codecov][codecov-src]][codecov-href] 7 | [![License][license-src]][license-href] 8 | 9 | > Load SCSS Variables into Nuxt instance for use in Templates/Scripts. 10 | 11 | [📖 **Release Notes**](./CHANGELOG.md) 12 | 13 | ## Usage 14 | 15 | ```scss 16 | // /assets/scss/variables.scss 17 | $primary: #0000ff; 18 | $secondary: #00ff00; 19 | $warning: #ff0000; 20 | ``` 21 | 22 | ```html 23 | 27 | ``` 28 | 29 | ## Setup 30 | 31 | 1. Add `nuxt-scss-to-js` dependency to your project 32 | 33 | ```bash 34 | yarn add nuxt-scss-to-js # or npm install nuxt-scss-to-js 35 | ``` 36 | 37 | 2. Add `nuxt-scss-to-js` to the `buildModules` section of `nuxt.config.js` 38 | 39 | ```js 40 | { 41 | buildModules: [ 42 | // Simple usage 43 | 'nuxt-scss-to-js', 44 | 45 | // With options 46 | ['nuxtScssToJs', { /* module options */ }] 47 | ] 48 | } 49 | ``` 50 | ## Options 51 | 52 | ### `namespace` 53 | - Type: `String` 54 | - Default: `scss` 55 | 56 | The name under which the scss variables will be accessible inside nuxt. 57 | 58 | ```js 59 | $scss.primary // '#0000ff' 60 | $scss.secondary // '#00ff00' 61 | $scss.warning // '#ff0000' 62 | ``` 63 | 64 | ### `path` 65 | - Type: `String` 66 | - Default: `'~/asstets/scss/variables.scss'` 67 | 68 | The path to your scss file with variables. 69 | 70 | 71 | ### `generate` 72 | - Type: `Boolean` 73 | - Default: false 74 | 75 | Will generate a `scss.js` file in the same directory as `path`. 76 | This file can be used to explicitly import scss variables. Useful for work with other plugins/modules. 77 | **Name of file depends namespace option** 78 | 79 | **Result** 80 | ```dir 81 | //path directory 82 | 83 | variables.scss 84 | scss.js 85 | ``` 86 | **Use** 87 | ```js 88 | import variables from '~/assets/scss/scss.js' 89 | ``` 90 | 91 | ### `inject` 92 | - Type: `Boolean` 93 | - Default: true 94 | 95 | By default the vue instance will be injected with the $scss object containing all scss variables. 96 | This can be turned off. Useful in conjuntion with the option `generate`, to only import variables where necessary. 97 | 98 | 99 | ## Examples: 100 | ### Example Default Settings 101 | ```js 102 | // nuxt.config.js 103 | buildModules: [ 104 | 'nuxt-scss-to-js' 105 | ] 106 | ``` 107 | ```scss 108 | // /assets/scss/variables.scss 109 | $primary: #0000ff; 110 | ``` 111 | ```html 112 | 116 | ``` 117 | 118 | ### Example with Generate and Namespace 119 | 120 | ```js 121 | // nuxt.config.js 122 | buildModules: [ 123 | 'nuxt-scss-to-js', 124 | { 125 | generate: true, 126 | namespace: 'fancyColors' 127 | } 128 | ] 129 | ``` 130 | 131 | ```html 132 | 135 | 144 | ``` 145 | 146 | 147 | 148 | ## Development 149 | 150 | 1. Clone this repository 151 | 2. Install dependencies using `yarn install` or `npm install` 152 | 3. Start development server using `npm run dev` 153 | 154 | ## License 155 | 156 | [MIT License](./LICENSE) 157 | 158 | Copyright (c) sugoidesune 159 | 160 | 161 | [npm-version-src]: https://img.shields.io/npm/v/nuxt-scss-to-js/latest.svg 162 | [npm-version-href]: https://npmjs.com/package/nuxt-scss-to-js 163 | 164 | [npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-scss-to-js.svg 165 | [npm-downloads-href]: https://npmjs.com/package/nuxt-scss-to-js 166 | 167 | [github-actions-ci-src]: https://github.com//workflows/ci/badge.svg 168 | [github-actions-ci-href]: https://github.com//actions?query=workflow%3Aci 169 | 170 | [codecov-src]: https://img.shields.io/codecov/c/github/.svg 171 | [codecov-href]: https://codecov.io/gh/ 172 | 173 | [license-src]: https://img.shields.io/npm/l/nuxt-scss-to-js.svg 174 | [license-href]: https://npmjs.com/package/nuxt-scss-to-js 175 | --------------------------------------------------------------------------------