import SASS and SCSS

[dimaHammer]

Hi!!! I have problems to use node_modules like "bulma" or "fontawesome". I installed and added these packages to the package.json the node_module "bulma" and imported it in the App.vue as following. If i want to start the dev server with npm run dev there is an error while the server try to rendering the sass file of "bulma". How can i set the configs in webpack to support sass and scss files? Please help.

Regards!

[dimaHammer]

I work with default project configurations.

[doabit]

@dimaHammer If you want to use sass, you should add sass-loader, could you show me your code to use bulma in App.vue?

[dimaHammer]

// webpack.base.config.js 
{
          test: /\.scss$/,
          use: [
              // fallback to style-loader in development
              process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
              "css-loader",
              "sass-loader"
          ]
      },
      {
        test: /\.sass$/,
        use: [
            // fallback to style-loader in development
            process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
      },

// App.vue
...
<script>
  import bulma from "bulma"
</script>
...

// this is the error in command line
error during render : /
/firma/firma/project/node_modules/bulma/bulma.sass:1
(function (exports, require, module, __filename, __dirname) { @charset "utf-8"
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at r (/firma/firma/project/node_modules/vue-server-renderer/build.js:8335:16)
    at Object.<anonymous> (webpack:/external "bulma":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap ca50bae0c9c81f123800:19:0)
    at Object.module.exports.Object.defineProperty.value (server-bundle.js:319:64)
    at __webpack_require__ (webpack:/webpack/bootstrap ca50bae0c9c81f123800:19:0)
    at Object.<anonymous> (src/App.vue:7:0)
    at __webpack_require__ (webpack:/webpack/bootstrap ca50bae0c9c81f123800:19:0)

The SASS loader is included webpack.base.config.js. I think the "server.js" script cant handle the sass files. This error occurs if the vue-renderer try to compile the sass file. The Browser display these "500 | Internal Server Error" which is defined in "server.js ~ at line 72".

[doabit]

I don't think you can use import bulma from "bulma", https://github.com/vue-bulma/vue-admin/blob/master/client/App.vue#L63

[JulyYangOne]

css不能分离 注入到style里面 seo的人说 这样很不友好

[habc0807]

@dimaHammer 问题解决了吗？我的实现方式：

{
        test: /\.(css|scss|sass)$/,
        use: ['vue-style-loader', 'css-loader', "sass-loader"],
},

理解 style-loader 与 vue-style-loader 的区别，问题解决了。