Question

我正在使用文档中所述的style-loader，node-sass，sass-loader软件包。我在 webpack.base.conf.js 中添加了以下模块规则

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

在我的 main.js 中，我导入了我的.scss文件

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

但是我在构建阶段遇到错误，因为加载了主题css但是

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

我不清楚如何正确处理css和scss文件......在google上搜索太多“解决方案”...无法找到最新的

欢迎反馈

Answer 1

求助..（使用webpack 3.6.0

<强> webpack.base.config.js

否需要

{ 测试：/。（s？）css $ /，使用：['style-loader'，'css-loader'，'sass-loader'] }，

所以我删除了它

在 utils.js 中，我认为我的css-loader

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

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

main.js删除了导入..

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

App.vue ，插入了@import ...

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

应该注意assets / scss / ..结构中嵌套的@import ..

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';

我的.scss文件中的Vue.js webpack sass-loader问题

1 个答案: