1. Instale las dependencias de Sass
npm install sass-loader --save-dev
npm install node-sass --sava-dev
npm install vue-style-loader --sava-dev
vue-loader es un cargador de paquetes web. Se utiliza para convertir componentes de vue en módulos js, html y css desplegables. Entonces, si queremos usar scss en el proyecto vue, debemos decirle a vue-loader cómo analizar mi archivo scss.
En el paquete web, todos los preprocesadores deben coincidir con los cargadores correspondientes. ¿Vue-loader permite que otros cargadores de paquetes web procesen parte del componente y luego determina automáticamente los cargadores que se utilizarán en función del atributo lang? Entonces, solo instale el cargador que maneja sass / scss. Puede usar scss en vue.
No es necesario configurar el cargador para scss / sass, porque vue-loader usará automáticamente el cargador correspondiente según el nombre del sufijo del formato de archivo
2. Por qué no es necesario configurar
Como mencionamos anteriormente, vue-loader permite la determinación automática de cargadores que se utilizarán en función del atributo lang. ¿Cómo lo hace? ¿Es tan asombroso? Echemos un vistazo al código fuente de la parte principal.
exports.cssLoaders = function (options) {
options = options || {
}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({
}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', {
indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
Es el código anterior el que le da a vue-loader esta capacidad. Utilizará diferentes cargadores de acuerdo con diferentes archivos.