{"action":"closed","issue":{"url":"https://api.github.com/repos/nguyenvanduocit/vue-cli-plugin-style-resources-loader/issues/7","repository_url":"https://api.github.com/repos/nguyenvanduocit/vue-cli-plugin-style-resources-loader","labels_url":"https://api.github.com/repos/nguyenvanduocit/vue-cli-plugin-style-resources-loader/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/nguyenvanduocit/vue-cli-plugin-style-resources-loader/issues/7/comments","events_url":"https://api.github.com/repos/nguyenvanduocit/vue-cli-plugin-style-resources-loader/issues/7/events","html_url":"https://github.com/nguyenvanduocit/vue-cli-plugin-style-resources-loader/issues/7","id":394584112,"node_id":"MDU6SXNzdWUzOTQ1ODQxMTI=","number":7,"title":"Didn't work for me for SCSS","user":{"login":"NathanWailes","id":1755791,"node_id":"MDQ6VXNlcjE3NTU3OTE=","avatar_url":"https://avatars3.githubusercontent.com/u/1755791?v=4","gravatar_id":"","url":"https://api.github.com/users/NathanWailes","html_url":"https://github.com/NathanWailes","followers_url":"https://api.github.com/users/NathanWailes/followers","following_url":"https://api.github.com/users/NathanWailes/following{/other_user}","gists_url":"https://api.github.com/users/NathanWailes/gists{/gist_id}","starred_url":"https://api.github.com/users/NathanWailes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NathanWailes/subscriptions","organizations_url":"https://api.github.com/users/NathanWailes/orgs","repos_url":"https://api.github.com/users/NathanWailes/repos","events_url":"https://api.github.com/users/NathanWailes/events{/privacy}","received_events_url":"https://api.github.com/users/NathanWailes/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-12-28T08:53:27Z","updated_at":"2018-12-29T15:40:42Z","closed_at":"2018-12-29T15:40:42Z","author_association":"NONE","body":"I tried using this package to import an SCSS themes file into all my single-file components but I kept getting a syntax error that looked like it was trying to import my SCSS file into my `main.js` file.  When I switched to just use the `style-resources-loader` code found [here](https://cli.vuejs.org/guide/css.html#automatic-imports) it worked fine.\r\n\r\nHere's the code that's working fine:\r\n\r\n```\r\nconst path = require(\"path\");\r\n\r\nmodule.exports = {\r\n  outputDir: path.resolve(__dirname, \"../server/templates/SPA\"),\r\n  assetsDir: \"../../static/SPA\",\r\n  chainWebpack: config => {\r\n    // The code below is used to automatically import the SCSS color themes into every single-file component.\r\n    // For more information see: https://cli.vuejs.org/guide/css.html#automatic-imports\r\n    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']\r\n    types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))\r\n  },\r\n}\r\n\r\nfunction addStyleResource (rule) {\r\n  rule.use('style-resource')\r\n    .loader('style-resources-loader')\r\n    .options({\r\n      patterns: [\r\n        path.resolve(__dirname, './src/assets/themes.scss'),\r\n      ],\r\n    })\r\n}\r\n```\r\n\r\nHere's the code that wasn't working:\r\n```\r\nconst path = require(\"path\");\r\n\r\nmodule.exports = {\r\n    outputDir: path.resolve(__dirname, \"../server/templates/SPA\"),\r\n    assetsDir: \"../../static/SPA\",\r\n    pluginOptions: {\r\n        'style-resources-loader': {\r\n            'patterns': [\r\n                path.resolve(__dirname, './src/assets/themes.scss'),\r\n            ]\r\n        }\r\n    }\r\n}\r\n```\r\n\r\nHere's my `package.json`:\r\n```\r\n{\r\n  \"name\": \"client\",\r\n  \"version\": \"0.1.0\",\r\n  \"private\": true,\r\n  \"scripts\": {\r\n    \"serve\": \"vue-cli-service serve\",\r\n    \"build\": \"vue-cli-service build\",\r\n    \"lint\": \"vue-cli-service lint\",\r\n    \"watch\": \"npm-watch\"\r\n  },\r\n  \"dependencies\": {\r\n    \"axios\": \"^0.18.0\",\r\n    \"hotkeys-js\": \"^3.4.1\",\r\n    \"lodash\": \"^4.17.10\",\r\n    \"style-resources-loader\": \"^1.2.1\",\r\n    \"underscore\": \"^1.8.3\",\r\n    \"vue\": \"^2.5.21\",\r\n    \"vue-clickaway2\": \"^2.3.1\",\r\n    \"vue-resource\": \"^1.3.4\",\r\n    \"vue-router\": \"^3.0.2\",\r\n    \"vuex\": \"^3.0.1\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@vue/cli-plugin-babel\": \"^3.2.0\",\r\n    \"@vue/cli-plugin-eslint\": \"^3.2.1\",\r\n    \"@vue/cli-service\": \"^3.2.0\",\r\n    \"babel-eslint\": \"^10.0.1\",\r\n    \"eslint\": \"^5.11.1\",\r\n    \"eslint-plugin-vue\": \"^5.0.0\",\r\n    \"node-sass\": \"^4.11.0\",\r\n    \"npm-watch\": \"^0.4.0\",\r\n    \"sass-loader\": \"^7.1.0\",\r\n    \"vue-template-compiler\": \"^2.5.21\"\r\n  },\r\n  \"eslintConfig\": {\r\n    \"root\": true,\r\n    \"env\": {\r\n      \"node\": true\r\n    },\r\n    \"extends\": [\r\n      \"plugin:vue/essential\",\r\n      \"eslint:recommended\"\r\n    ],\r\n    \"rules\": {},\r\n    \"parserOptions\": {\r\n      \"parser\": \"babel-eslint\"\r\n    }\r\n  },\r\n  \"postcss\": {\r\n    \"plugins\": {\r\n      \"autoprefixer\": {}\r\n    }\r\n  },\r\n  \"browserslist\": [\r\n    \"> 1%\",\r\n    \"last 2 versions\",\r\n    \"not ie <= 8\"\r\n  ],\r\n  \"watch\": {\r\n    \"build\": {\r\n      \"patterns\": [\r\n        \"src/**/\",\r\n        \"test/**/\",\r\n        \"/\"\r\n      ],\r\n      \"extensions\": \"js,vue,html\",\r\n      \"runOnChangeOnly\": true\r\n    }\r\n  }\r\n}\r\n```"}}
{"actor":{"display_login":"NathanWailes"}}