Sass не компилируется

Мои файлы scss не компилируются. Он не понимает, что я делаю со своим кодом. Я хочу использовать Sass вместо CSS, но не могу найти правильный способ компиляции Sass.

Я использую шаблон веб-пакета с Vue.js

Мой конфигурационный файл webpack выглядит так:

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
return path.join(__dirname, '..', dir)
}

module.exports = {
entry: {
app: './src/main.js',
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
}
},
module: {
rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  },
  {
    test: /\.scss$/,
    use: [ 'style-loader','css-loader','sass-loader' ],
    loaders: ['style', 'css', 'sass']
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
]
}
}

webpack vue.js sass webpack-style-loader
person Lucafraser    schedule 03.04.2017    source источник
comment
Вы хотите использовать scss в компонентах одного файла VueJS?   -  person Belmin Bedak    schedule 03.04.2017
comment
Использовать в компоненте ‹style lang=scss›   -  person Ajay    schedule 03.04.2017

Ответы (2)


arrow_upward
0
arrow_downward

Один из способов сделать это — использовать один файл scss в качестве записи. Именно сюда импортируются все ваши разные файлы scss. Что-то вроде этого. Затем вы импортируете этот файл scss в исходный код вашего файла записи js (в данном случае ./src/main.js). Итак, когда webpack читает ваш main.js, он увидит import './myscssfile.scss' и ищет загрузчик (или, я думаю, так и есть). Вот как я делаю свой модуль scss в webpack2:

module: {
 rules: [
  // my js stuff
  { test: /\.js$/, enforce: 'pre', loader: 'eslint-loader', exclude: /node_modules/ },
  
  // my scss stuff
  {
    test: /\.scss$/,
    use: [
      {
        loader: 'style-loader'
      },
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 2,
          sourceMap: true,
          localIdentName: '[local]___[hash:base64:5]'
        }
      },
      {
        loader: 'autoprefixer-loader',
        options: {
          browsers: 'last 2 version'
        }
      },
      {
        loader: 'sass-loader',
        options: {
          outputStyle: 'expanded',
          sourceMap: true
        }
      }
    ]
  }
 ]
}

Надеюсь это работает.

person Vahid PG    schedule 03.04.2017

arrow_upward
-1
arrow_downward

Просто используйте <style lang="sass"></style в своем компоненте. Дайте мне знать, если это поможет.

person Fleeck    schedule 03.04.2017