search

nguyenvanduocit / vue-cli-plugin-style-resources-loader

Vue cli plugin to support style-resources-loader.
58 stars 7 forks source link

Didn't work for me for SCSS #7

Closed NathanWailes closed 5 years ago

NathanWailes commented 5 years ago

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 it worked fine.

Here's the code that's working fine:

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../server/templates/SPA"),
  assetsDir: "../../static/SPA",
  chainWebpack: config => {
    // The code below is used to automatically import the SCSS color themes into every single-file component.
    // For more information see: https://cli.vuejs.org/guide/css.html#automatic-imports
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/assets/themes.scss'),
      ],
    })
}

Here's the code that wasn't working:

const path = require("path");

module.exports = {
    outputDir: path.resolve(__dirname, "../server/templates/SPA"),
    assetsDir: "../../static/SPA",
    pluginOptions: {
        'style-resources-loader': {
            'patterns': [
                path.resolve(__dirname, './src/assets/themes.scss'),
            ]
        }
    }
}

Here's my package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "watch": "npm-watch"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "hotkeys-js": "^3.4.1",
    "lodash": "^4.17.10",
    "style-resources-loader": "^1.2.1",
    "underscore": "^1.8.3",
    "vue": "^2.5.21",
    "vue-clickaway2": "^2.3.1",
    "vue-resource": "^1.3.4",
    "vue-router": "^3.0.2",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.1",
    "@vue/cli-service": "^3.2.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.11.1",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.11.0",
    "npm-watch": "^0.4.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "watch": {
    "build": {
      "patterns": [
        "src/**/",
        "test/**/",
        "/"
      ],
      "extensions": "js,vue,html",
      "runOnChangeOnly": true
    }
  }
}
nguyenvanduocit commented 5 years ago

Hi, Please try this:

const path = require("path");

module.exports = {
    outputDir: path.resolve(__dirname, "../server/templates/SPA"),
    assetsDir: "../../static/SPA",
    pluginOptions: {
        'style-resources-loader': {
            'preProcessor':'scss',
            'patterns': [
                path.resolve(__dirname, './src/assets/themes.scss'),
            ]
        }
    }
}
NathanWailes commented 5 years ago

That worked, thank you!