├── .circleci └── config.yml ├── .github └── issue_template.md ├── .gitignore ├── CONTRIBUTING.md ├── README.md ├── index.js ├── package.json ├── test ├── fixture │ ├── assets │ │ └── sass │ │ │ ├── colors.scss │ │ │ └── variables.scss │ ├── nuxt.config.1.js │ ├── nuxt.config.2.js │ ├── nuxt.config.3.js │ ├── nuxt.config.4.js │ └── pages │ │ └── index.vue └── module.test.js └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | working_directory: /usr/src/app 5 | docker: 6 | - image: banian/node 7 | steps: 8 | # Checkout repository 9 | - checkout 10 | 11 | # Restore cache 12 | - restore_cache: 13 | key: yarn-{{ checksum "yarn.lock" }} 14 | 15 | # Install dependencies 16 | - run: 17 | name: Install Dependencies 18 | command: NODE_ENV=dev yarn 19 | 20 | # Keep cache 21 | - save_cache: 22 | key: yarn-{{ checksum "yarn.lock" }} 23 | paths: 24 | - "node_modules" 25 | 26 | # Test 27 | - run: 28 | name: Tests 29 | command: yarn test 30 | 31 | # Coverage 32 | - run: 33 | name: Coverage 34 | command: yarn codecov 35 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ### Overview of the problem 10 | 11 | - **Nodejs** version: [X.X.X] 12 | - **Nuxtjs** version: [X.X.X] 13 | - **nuxt-sass-resources-loader** version: [X.X.X] 14 | 15 | ### Description 16 | 17 | 18 | 19 | ### Steps to reproduce 20 | 21 | 26 | 27 | ### Expected behavior 28 | 29 | 30 | 31 | ### Actual behavior 32 | 33 | 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | coverage 5 | dist 6 | yarn-error.log 7 | reports 8 | .nuxt -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | We accept contributions via Pull Requests on [Github](https://github.com/anteriovieira/nuxt-sass-resources-loader). 6 | 7 | 8 | ## Pull Requests 9 | 10 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 11 | 12 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option. 13 | 14 | - **Create feature branches** - Don't ask us to pull from your master branch. 15 | 16 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 17 | 18 | - **Send coherent history** - Make sure your commits message means something 19 | 20 | **Happy coding**! 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: We are closing the support for this package and transferred to the official community package. So we strongly suggest that you use the official community package [@nuxtjs/style-resources](https://github.com/nuxt-community/style-resources-module). 2 | 3 | Specially thanks our contributors submitting bug reports, feature requests and commenting on issues 4 | 5 | #### Migration guide 6 | 7 | ```js 8 | // nuxt-sass-resorces-loader 9 | export default { 10 | modules: [ 11 | 'nuxt-sass-resources-loader' 12 | ], 13 | // your settings here 14 | sassResources: [ 15 | '@/path/to/first-resources.sass' 16 | ] 17 | } 18 | ``` 19 | 20 | ```js 21 | // @nuxtjs/style-resources 22 | export default { 23 | modules: [ 24 | '@nuxtjs/style-resources', 25 | ], 26 | 27 | styleResources: { 28 | // your settings here 29 | scss: ['@/path/to/first-resources.sass'], 30 | less: [], 31 | stylus: [] 32 | } 33 | } 34 | ``` 35 | 36 | ---- 37 | 38 | # nuxt-sass-resources-loader 39 | 40 | [![npm](https://img.shields.io/npm/v/nuxt-sass-resources-loader.svg)](https://www.npmjs.com/package/nuxt-sass-resources-loader) 41 | [![CircleCI](https://img.shields.io/circleci/project/github/anteriovieira/nuxt-sass-resources-loader.svg?style=flat-square)](https://circleci.com/gh/anteriovieira/nuxt-sass-resources-loader) 42 | [![npm](https://img.shields.io/npm/dt/nuxt-sass-resources-loader.svg?style=flat-square)](https://npmjs.com/package/nuxt-sass-resources-loader) 43 | [![donate](https://img.shields.io/badge/donate-%E2%99%A5-ff5f5f.svg)](https://patreon.com/anteriovieira) 44 | 45 | 46 | This module does all the hard work of configuring [sass-resources-loader](https://github.com/shakacode/sass-resources-loader) for your nuxt application. 47 | 48 | > `sass-resources-loader` @import your SASS resources into every required SASS module. So you can use your shared variables & mixins across all SASS styles without manually importing them in each file. Made to work with CSS Modules! 49 | 50 | ## Install 51 | 52 | ```sh 53 | npm i nuxt-sass-resources-loader 54 | # or 55 | yarn add nuxt-sass-resources-loader 56 | ``` 57 | 58 | > Note that installing as a dev dependency `--save-dev` or `-D` will not work correctly. 59 | 60 | ## Usage 61 | 62 | You can use the [nuxtjs aliases](https://nuxtjs.org/guide/directory-structure#aliases) to resolve the file path. 63 | 64 | ```js 65 | module.exports = { 66 | modules: [ 67 | // provide path to the file with resources 68 | ['nuxt-sass-resources-loader', '@/path/to/resources.scss'], 69 | 70 | // or array of paths 71 | ['nuxt-sass-resources-loader', [ 72 | '@/path/to/first-resources.sass', 73 | '@/path/to/second-resources.scss', 74 | ]], 75 | 76 | // or the native options 77 | ['nuxt-sass-resources-loader', { 78 | resources: '@/path/to/resources.sass' 79 | }], 80 | 81 | // or from the npm package 82 | ['nuxt-sass-resources-loader', 'my-package/sass/resources.scss'] 83 | ], 84 | } 85 | ``` 86 | 87 | > 88 | 89 | with sass resources option. require v1.1+ 90 | 91 | ```js 92 | // nuxt.config.js 93 | module.exports = { 94 | modules: [ 95 | 'nuxt-sass-resources-loader' 96 | ], 97 | sassResources: [ 98 | '@/path/to/first-resources.sass' 99 | ] 100 | } 101 | ``` 102 | 103 | 104 | > You can also use resolve from node to indicate the relative path of the file: 105 | ```js 106 | const resolve = require('path').resolve 107 | ... 108 | ['nuxt-sass-resources-loader', resolve(__dirname, './path/to/resources.scss')] 109 | ... 110 | ``` 111 | 112 | ### Glob pattern matching 113 | 114 | You can specify glob patterns to match your all of your files in the same directory. 115 | 116 | ```js 117 | // Specify a single path 118 | resources: './path/to/resources/**/*.scss', // will match all files in folder and subdirectories 119 | // or an array of paths 120 | resources: [ './path/to/resources/**/*.scss', './path/to/another/**/*.scss' ] 121 | ``` 122 | 123 | > Note that sass-resources-loader will resolve your files in order. If you want your variables to be accessed across all of your mixins you should specify them in first place. 124 | 125 | ```js 126 | resources: [ './path/to/variables/vars.scss', './path/to/mixins/**/*.scss' ] 127 | ``` 128 | 129 | [For more details see the official documentation](https://github.com/shakacode/sass-resources-loader#usage) 130 | 131 | ## License 132 | 133 | [MIT](http://opensource.org/licenses/MIT) 134 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const Module = require('module') 2 | 3 | const defaults = { 4 | resources: [] 5 | } 6 | 7 | module.exports = function nuxtSassResourcesLoader (moduleOptions = {}) { 8 | if (typeof moduleOptions === 'string' || Array.isArray(moduleOptions)) { 9 | moduleOptions = {resources: moduleOptions} 10 | } 11 | 12 | const options = Object.assign({}, defaults, {resources: this.options.sassResources}, moduleOptions) 13 | 14 | // Casts the provided resource as an array if it's not one. 15 | options.resources = Array.isArray(options.resources) ? options.resources : [options.resources] 16 | 17 | // Try to resolve using NPM resolve path first 18 | options.resources = options.resources.filter(r => !!r).reduce((resources, resource) => { 19 | resources.push(resolvePath.call(this.nuxt, resource)) 20 | 21 | return resources 22 | }, []) 23 | 24 | const sassResourcesLoader = { 25 | loader: 'sass-resources-loader', options 26 | } 27 | 28 | const version = this.nuxt.constructor.version 29 | const [major] = version.split('.') 30 | 31 | this.extendBuild(config => { 32 | if (major === '1') { 33 | extendV1(config, { sassResourcesLoader }) 34 | } else { 35 | extend(config, { sassResourcesLoader }) 36 | } 37 | }) 38 | } 39 | 40 | function extendV1(config, { sassResourcesLoader }) { 41 | const sassLoader = config.module.rules.filter(({ test = '' }) => { 42 | return ['/\\.sass$/', '/\\.scss$/'].indexOf(test.toString()) !== -1 43 | }) 44 | const vueLoader = config.module.rules.find(({ test = '' }) => { 45 | return test.toString() === '/\\.vue$/' 46 | }) 47 | 48 | const loaders = vueLoader.options.loaders 49 | 50 | Object.keys(loaders).forEach(loader => { 51 | if (['sass', 'scss'].indexOf(loader) !== -1) { 52 | loaders[loader].push(sassResourcesLoader) 53 | } 54 | }) 55 | 56 | Object.keys(sassLoader).forEach(loader => { 57 | sassLoader[loader].use.push(sassResourcesLoader) 58 | }) 59 | } 60 | 61 | function extend(config, { sassResourcesLoader }) { 62 | const sassLoaders = config.module.rules.filter(({ test = '' }) => { 63 | return ['/\\.sass$/', '/\\.scss$/'].indexOf(test.toString()) !== -1 64 | }) 65 | 66 | for (const sassLoader of sassLoaders) { 67 | for (const rule of sassLoader.oneOf) { 68 | rule.use.push(sassResourcesLoader) 69 | } 70 | } 71 | } 72 | 73 | // custom resolvePath nuxt.js/lib/core/nuxt.js 74 | function resolvePath(_path) { 75 | try { 76 | const resolvedPath = Module._resolveFilename(_path, { 77 | paths: this.options.modulesDir 78 | }) 79 | return resolvedPath 80 | } catch (error) { 81 | if (error.code !== 'MODULE_NOT_FOUND') { 82 | throw error 83 | } 84 | } 85 | 86 | return this.resolveAlias(_path) 87 | } 88 | 89 | module.exports.meta = require('./package.json') 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-sass-resources-loader", 3 | "version": "2.0.5", 4 | "description": "SASS resources (e.g. variables, mixins etc.) module for NuxtJs", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "nuxt test/fixture", 8 | "test": "jest", 9 | "release": "standard-version && git push --follow-tags && npm publish" 10 | }, 11 | "keywords": [ 12 | "nuxt", 13 | "sass", 14 | "sass-resources-loader", 15 | "module" 16 | ], 17 | "author": { 18 | "name": "Antério Vieira", 19 | "email": "anteriovieira@gmail.com" 20 | }, 21 | "jest": { 22 | "testEnvironment": "node", 23 | "collectCoverage": true 24 | }, 25 | "license": "MIT", 26 | "repository": { 27 | "type": "git", 28 | "url": "git@github.com:anteriovieira/nuxt-sass-resources-loader.git" 29 | }, 30 | "homepage": "https://github.com/anteriovieira/nuxt-sass-resources-loader", 31 | "dependencies": { 32 | "sass-resources-loader": "^1.3.1" 33 | }, 34 | "devDependencies": { 35 | "codecov": "^3.0.2", 36 | "jest": "^23.0.1", 37 | "jsdom": "^11.11.0", 38 | "node-sass": "^4.9.0", 39 | "nuxt": "^1.4.0", 40 | "sass-loader": "^6.0.7" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /test/fixture/assets/sass/colors.scss: -------------------------------------------------------------------------------- 1 | $green: #42b883; 2 | $blue: #35495e; -------------------------------------------------------------------------------- /test/fixture/assets/sass/variables.scss: -------------------------------------------------------------------------------- 1 | $assets: '/assets/scss/'; -------------------------------------------------------------------------------- /test/fixture/nuxt.config.1.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '../..'), 5 | srcDir: __dirname, 6 | dev: false, 7 | render: { 8 | resourceHints: false 9 | }, 10 | modules: [ 11 | ['@@', [ 12 | '~/assets/sass/colors.scss' 13 | ]] 14 | ], 15 | } 16 | -------------------------------------------------------------------------------- /test/fixture/nuxt.config.2.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '../..'), 5 | srcDir: __dirname, 6 | dev: false, 7 | render: { 8 | resourceHints: false 9 | }, 10 | modules: [ 11 | ['@@', { 12 | resources: '~/assets/sass/colors.scss' 13 | }] 14 | ], 15 | } 16 | -------------------------------------------------------------------------------- /test/fixture/nuxt.config.3.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '../..'), 5 | srcDir: __dirname, 6 | dev: false, 7 | render: { 8 | resourceHints: false 9 | }, 10 | modules: [ 11 | ['@@', { 12 | resources: ['@/assets/sass/*.scss'] 13 | }] 14 | ], 15 | } 16 | -------------------------------------------------------------------------------- /test/fixture/nuxt.config.4.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | rootDir: resolve(__dirname, '../..'), 5 | srcDir: __dirname, 6 | dev: false, 7 | render: { 8 | resourceHints: false 9 | }, 10 | modules: [ 11 | '@@' 12 | ], 13 | sassResources: [ 14 | '@/assets/sass/colors.scss', 15 | '@/assets/sass/variables.scss', 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /test/fixture/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 20 | -------------------------------------------------------------------------------- /test/module.test.js: -------------------------------------------------------------------------------- 1 | const { Nuxt, Builder } = require('nuxt') 2 | const request = require('request-promise-native') 3 | 4 | const url = (path) => `http://localhost:3000${path}` 5 | const get = (path) => request(url(path)) 6 | 7 | // describe('Config mode 1', () => { 8 | // let nuxt 9 | // const config = require('./fixture/nuxt.config.1') 10 | 11 | // beforeAll(async () => { 12 | // nuxt = new Nuxt(config) 13 | // await new Builder(nuxt).build() 14 | // await nuxt.listen(3000) 15 | // }, 60000) 16 | 17 | // afterAll(async () => { 18 | // await nuxt.close() 19 | // }) 20 | 21 | // test('render', async () => { 22 | // let html = await get('/') 23 | // expect(html).toContain('color:#35495e;') 24 | // expect(html).toContain('background:#42b883') 25 | // }) 26 | // }) 27 | 28 | // describe('Config mode 2', () => { 29 | // let nuxt 30 | // const config = require('./fixture/nuxt.config.2') 31 | 32 | // beforeAll(async () => { 33 | // nuxt = new Nuxt(config) 34 | // await new Builder(nuxt).build() 35 | // await nuxt.listen(3000) 36 | // }, 60000) 37 | 38 | // afterAll(async () => { 39 | // await nuxt.close() 40 | // }) 41 | 42 | // test('render', async () => { 43 | // let html = await get('/') 44 | // expect(html).toContain('color:#35495e;') 45 | // expect(html).toContain('background:#42b883') 46 | // }) 47 | // }) 48 | 49 | // describe('Config mode 3', () => { 50 | // let nuxt 51 | // const config = require('./fixture/nuxt.config.3') 52 | 53 | // beforeAll(async () => { 54 | // nuxt = new Nuxt(config) 55 | // await new Builder(nuxt).build() 56 | // await nuxt.listen(3000) 57 | // }, 60000) 58 | 59 | // afterAll(async () => { 60 | // await nuxt.close() 61 | // }) 62 | 63 | // test('render', async () => { 64 | // let html = await get('/') 65 | // expect(html).toContain('color:#35495e;') 66 | // expect(html).toContain('background:#42b883') 67 | // }) 68 | // }) 69 | 70 | describe('Config mode 4', () => { 71 | let nuxt 72 | const config = require('./fixture/nuxt.config.4') 73 | 74 | beforeAll(async () => { 75 | nuxt = new Nuxt(config) 76 | await new Builder(nuxt).build() 77 | await nuxt.listen(3000) 78 | }, 60000) 79 | 80 | afterAll(async () => { 81 | await nuxt.close() 82 | }) 83 | 84 | test('render', async () => { 85 | let html = await get('/') 86 | expect(html).toContain('color:#35495e;') 87 | expect(html).toContain('background:#42b883') 88 | }) 89 | }) --------------------------------------------------------------------------------