CODEWITHSUNDEEP
vue.jssass-loaderwebpack-3
user762579
user762579

Reputation:

Vue.js webpack sass-loader issue with my .scss file

I am using style-loader, node-sass, sass-loader packages as stated in the doc.. I added to my webpack.base.conf.js the following modules rules

  {
    test: /\.(s?)css$/,
    use: ['style-loader','css-loader','sass-loader']
  },

In my main.js , I import my .scss files 

 import 'element-ui/lib/theme-chalk/index.css' // Theme UI
import './assets/scss/index.scss' // Customize UI

but I get an error during build phase as the theme css are loaded but then 

error  in ./src/assets/scss/index.scss
 Module build failed:
 @import './globals/index.scss';
 ^

It's not clear for me how to handle correctly both css and scss files... too many 'solutions' when googling on it ... cannoit find the latest one

feedback welcome

Upvotes: 1

Views: 1158

Answers (1)

user762579
user762579

Reputation:

SOLVED.. ( using webpack 3.6.0

webpack.base.config.js

NO need for

{ test: /.(s?)css$/, use: ['style-loader','css-loader','sass-loader'] },

so I removed it

In utils.js , I shoudl have my css-loader

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

main.js removed the import ..

// import './element-ui/lib/theme-chalk/index.css' // Theme UI
// import './assets/scss/index.scss' // Customize UI

App.vue , inserted the @import ...

<style lang="scss">
@import "element-ui/lib/theme-chalk/index.css";
@import "./assets/scss/index.scss";
#app {

Should take care about the nested @import.. in the assets/scss/.. structure

src
  assets
    scss
      globals
        index.scss
          // .border-black { border: 1px solid #000; }...
      mixins
        animations
            index.scss
              // ...
        breakpoints
            index.scss
              // ...
        buttons
            index.scss
              // ...
        tables
            index.scss
              // ... 
        transitions
            index.scss
              // ...
        index.scss
          // @import 'breakpoints/index.scss'; @import 'animations/index.scss'; @import 'buttons/index.scss'; @import 'tables/index.scss'; @import 'transitions/index.scss'; ...
      vars
        colors
            index.scss
                // $bg-white: #fff; $bg-white-light: #f5f5f5; $bg-black: #000; ...
        index.scss
            // @import 'colors/index.scss';
      index.scss
        // @import 'globals/index.scss'; @import 'mixins/index.scss'; @import 'vars/index.scss';

Upvotes: 1

Related Questions